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' )