Vue Router is the official routing library for Vue.js applications. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Vue Router provides powerful features for nested route/view mapping, modular, component-based router configuration, route params, query, wildcards, and more.

Pros

• Seamless integration with Vue.js ecosystem
• Supports nested routes and views
• Provides programmatic navigation
• Offers fine-grained navigation control with navigation guards

Cons

• Learning curve for beginners
• Can be overkill for simple applications
• Limited built-in support for code-splitting (requires manual configuration)
• Occasional breaking changes between major versions

Code Examples

1. Basic route configuration:

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

2. Navigation guard example:

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { name: 'Login' }
  }
})

3. Programmatic navigation:

// Navigate to a specific route
router.push('/user/123')

// Navigate with named route
router.push({ name: 'user', params: { id: '123' } })

// Go back in history
router.go(-1)

Getting Started

1. Install Vue Router:

npm install vue-router@4

2. Create a router instance in your main.js:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})

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

3. Use router-view component in your App.vue:

<template>
  <router-view></router-view>
</template>