Vue Router Basics

npm install vue-router@4

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// Import view components
import HomeView from '@/views/HomeView.vue'

const router = createRouter({
  // createWebHistory: uses browser History API (clean URLs: /about)
  // createWebHashHistory: uses hash (/#/about) — works without server config
  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // Lazy loading — only downloads when user visits /about
      component: () => import('@/views/AboutView.vue')
    },
    {
      path: '/products',
      name: 'products',
      component: () => import('@/views/ProductsView.vue')
    },
    {
      path: '/products/:id',
      name: 'product-detail',
      component: () => import('@/views/ProductDetailView.vue')
    },
    {
      // Catch-all 404 route — MUST be last
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('@/views/NotFoundView.vue')
    }
  ],

  // Scroll to top on route change
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    return { top: 0 }
  }
})

export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

<!-- src/App.vue -->
<script setup>
import { RouterView, RouterLink } from &#039;vue-router'
</script>

<template>
  <!-- Navigation -->
  <nav>
    <!-- RouterLink renders as <a> tag but handles SPA navigation -->
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/products">Products</RouterLink>

    <!-- Named route -->
    <RouterLink :to="{ name: &#039;home' }">Home (named)</RouterLink>

    <!-- With params -->
    <RouterLink :to="{ name: &#039;product-detail', params: { id: 42 } }">
      Product 42
    </RouterLink>

    <!-- active-class: class added to current page&#039;s link -->
    <!-- router-link-active: partially matches /products and /products/1 -->
    <!-- router-link-exact-active: exact match only -->
    <RouterLink to="/products" active-class="my-active">Products</RouterLink>
  </nav>

  <!-- RouterView: renders the matched route component here -->
  <main>
    <RouterView />
  </main>
</template>

<script setup>
import { useRouter, useRoute } from &#039;vue-router'

const router = useRouter()  // For navigation
const route = useRoute()    // For reading current route info

// Navigate to different routes
function goHome() {
  router.push(&#039;/')
}

function goToProduct(id) {
  // Push — adds to history
  router.push(`/products/${id}`)
  // Or with named route:
  router.push({ name: &#039;product-detail', params: { id } })
  // With query params: /products?category=electronics&sort=price
  router.push({ path: &#039;/products', query: { category: 'electronics' } })
}

function goBack() {
  router.go(-1)   // Go back 1 step (like browser back button)
}

function replaceRoute() {
  // Replace — replaces current history entry (no back button to previous)
  router.replace(&#039;/login')
}

// Read current route info
console.log(route.path)          // '/products/42'
console.log(route.params.id)     // '42'
console.log(route.query.sort)    // 'price'
console.log(route.name)          // 'product-detail'
console.log(route.fullPath)      // '/products/42?sort=price'
</script>

// router/index.js for the blog app
const routes = [
  { path: '/', name: 'home', component: () => import('@/views/HomeView.vue') },
  { path: '/blog', name: 'blog', component: () => import('@/views/BlogView.vue') },
  { path: '/blog/:slug', name: 'post', component: () => import('@/views/PostView.vue') },
  { path: '/contact', name: 'contact', component: () => import('@/views/ContactView.vue') },
  { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFoundView.vue') }
]

<!-- App.vue — Navbar with active state styling -->
<template>
  <div id="app">
    <header>
      <nav class="navbar">
        <RouterLink to="/" class="brand">📖 VueBlog</RouterLink>
        <div class="nav-links">
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/blog">Blog</RouterLink>
          <RouterLink to="/contact">Contact</RouterLink>
        </div>
      </nav>
    </header>
    <RouterView v-slot="{ Component }">
      <!-- Transition between pages -->
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </RouterView>
  </div>
</template>

<style>
.router-link-exact-active {
  color: #6366f1;
  font-weight: 700;
  border-bottom: 2px solid #6366f1;
}
.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>