Vue Router Installation

• Vue 2 (Vue Router 3) : npm install vue-router@3
• Vue 3 (Vue Router 4) : npm install vue-router@4

Router Configuration

Vue Router 3 Implementation

Setting Up Routes

// router/index.js  
import Vue from 'vue'  
import Router from 'vue-router'  
import HomePage from '../views/Home.vue'  
import AboutPage from '../views/About.vue'  
  
Vue.use(Router)  

const pathConfig = [  
  {  
    path: '/',  
    name: 'HomePage',  
    component: HomePage  
  },  
  {  
    path: '/about',  
    name: 'AboutPage',  
    component: AboutPage  
  }  
]  

export default new Router({  
  mode: 'history',  
  base: process.env.BASE_URL,  
  routes: pathConfig  
})

Implementing Router

// main.js  
import Vue from 'vue'  
import MainApp from './App.vue'  
import navigationRouter from './router'  
  
new Vue({  
  router: navigationRouter,  
  render: h => h(MainApp)  
}).$mount('#app')  

Vue Router 4 Implementation

Setting Up Routes

// router/index.js
import { buildRouter, createHistory } from 'vue-router'  
import HomePage from '../views/Home.vue'  
import AboutPage from '../views/About.vue'  
  
const pathConfig = [  
  {  
    path: '/',  
    name: 'HomePage',  
    component: HomePage  
  },  
  {  
    path: '/about',  
    name: 'AboutPage',  
    component: AboutPage  
  }  
]  
  
const navigationRouter = buildRouter({  
  history: createHistory(process.env.BASE_URL),  
  routes: pathConfig  
})  
  
export default navigationRouter

Implementing Router

// main.js  
import { initializeApp } from 'vue'  
import MainApp from './App.vue'  
import navigationRouter from './router'  
  
const app = initializeApp(MainApp)  
app.use(navigationRouter)  
app.mount('#app')

Key Differencse: Vue Router 4 vs Vue Router 3

• Vue Version Compatibility: Vue Router 4 is designed specifically for Vue 3, while Vue Router 3 works with Vue 2.
• Composition API Integration: Vue Router 4 offers enhanced support for Vue 3's Composition API through useRoute and useRouter composables for accessing route information in functional components.
• TypeScript Anhancements: Vue Router 4 provides improved TypeScript support with more comprehensive and accurate type definitions.
• Navigation Guard Improvements: Vue Router 4 refines the navigation guard API, offering greater flexibility and control over route transitions.
• Scroll Behavior Management: Vue Router 4 enhanecs scroll behavior handling with more granular control options.

Key Implementation Changes:

1. Router instantiation changes from new Router() to createRouter()
2. History mode configuration changes from mode: 'history' to createWebHistory()
3. Application initialization changes from new Vue({ router }) to app.use(router)

Router Mode Variations

Vue Router 3.xVue Router 4.xhistorycreateWebHistory()hashcreateWebHashHistory()abstractcreateMemoryHistory()