Vue Router

What is Vue Router?

Vue Router is the official routing library for Vue.js. It enables client-side navigation in single-page applications — switching between views without a full page reload.

Vue Router — Setup, Routes, Navigation, Guards

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/HomeView.vue'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // Lazy loading — code split
            component: () => import('../views/AboutView.vue')
        },
        {
            // Dynamic route parameter
            path: '/users/:id',
            name: 'user-detail',
            component: () => import('../views/UserDetail.vue'),
            props: true  // pass params as props
        },
        {
            // Nested routes
            path: '/dashboard',
            component: () => import('../views/Dashboard.vue'),
            meta: { requiresAuth: true },
            children: [
                { path: '', name: 'dashboard', component: () => import('../views/DashboardHome.vue') },
                { path: 'settings', name: 'settings', component: () => import('../views/Settings.vue') },
            ]
        },
        {
            // Redirect
            path: '/home',
            redirect: '/'
        },
        {
            // 404 catch-all
            path: '/:pathMatch(.*)*',
            name: 'not-found',
            component: () => import('../views/NotFound.vue')
        }
    ]
})

// Navigation guard — protect routes
router.beforeEach((to, from, next) => {
    const isLoggedIn = !!localStorage.getItem('token')

    if (to.meta.requiresAuth && !isLoggedIn) {
        next({ name: 'login', query: { redirect: to.fullPath } })
    } else {
        next()
    }
})

export default router

<!-- App.vue -->
<template>
  <nav>
    <!-- RouterLink — declarative navigation -->
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>

    <!-- Named route -->
    <RouterLink :to="{ name: 'user-detail', params: { id: 42 } }">
      User 42
    </RouterLink>

    <!-- With query params -->
    <RouterLink :to="{ path: '/search', query: { q: 'vue', page: 1 } }">
      Search
    </RouterLink>

    <!-- Active class — automatically added when route matches -->
    <RouterLink to="/about" active-class="nav-active" exact-active-class="nav-exact">
      About
    </RouterLink>
  </nav>

  <!-- RouterView — renders the matched component -->
  <RouterView />
</template>

<!-- Using router composables -->
<template>
  <div>
    <p>User ID: {{ userId }}</p>
    <p>Current path: {{ route.path }}</p>
    <button @click="goBack">Back</button>
    <button @click="goToDashboard">Dashboard</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route  = useRoute()   // current route info
const router = useRouter()  // router instance

// Access route params
const userId = computed(() => route.params.id)

// Access query params
const searchQuery = computed(() => route.query.q)

// Programmatic navigation
function goBack() {
  router.back()
}

function goToDashboard() {
  router.push({ name: 'dashboard' })
}

function goToUser(id) {
  router.push({ name: 'user-detail', params: { id } })
}

function replaceRoute() {
  router.replace('/home')  // replace current history entry
}
</script>

Previous Next

Vue Router

What is Vue Router?

Ready to Level Up Your Skills?