Vue-Router [Vue Js]

Table of Contents

• What is Vue Router?
• Create Vue JS Application
• Installing Packages

What is Vue Router?

Vue router is a recommended and official package used for navigating pages within the Vue JS application. With Vue Router, we can also dynamically update content without refreshing.

 

Create Vue JS Application

yarn create vite your-project-name

Installing Packages

yarn add vue-router

Create router.js in the src folder

import {createRouter, createWebHistory} from    'vue-router' ;

export    const router = createRouter({
     history : createWebHistory(),
     routes : [
    {
      path : '/' ,
         component : import ( './components/Home.vue' )
    }
  ]
});

app. vue

<template>  
  <div>  
    <router-link to="/"> </router-link>  
    <router-view></router-view>  
  </div>  
</template>

 

main.js

import {createApp} from  'vue' 
import App from  './App.vue' 
import {router} from  "./router.js" ;

createApp(App)
    .use(router)
    .mount( '#app' )