Vue.js: Vue Router

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

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') },
  { path: '/orders', component: () => import('@/views/OrdersPage.vue') },
  { path: '/users', component: () => import('@/views/UsersPage.vue') },
  { path: '/settings', component: () => import('@/views/SettingsPage.vue') }
]

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

export default router

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

// 1. Define the routes (lazy loaded)
const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') }
]

// 2. Create the router instance
const router = createRouter({
  // history mode: the URL has no # (recommended)
  history: createWebHistory(),
  // hash mode: the URL contains # (works with older browsers)
  // history: createWebHashHistory(),
  
  routes,
  
  // Scroll behavior: scroll back to the top on navigation
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

export default router

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/about', component: () => import('@/views/AboutPage.vue') },
  { path: '/contact', component: () => import('@/views/ContactPage.vue') }
]

const routes = [
  // /products/123
  { 
    path: '/products/:id', 
    component: () => import('@/views/ProductDetailPage.vue') 
  },
  // /users/456/posts/789
  { 
    path: '/users/:userId/posts/:postId', 
    component: () => import('@/views/PostPage.vue') 
  },
  // Optional parameter
  { 
    path: '/news/:category?', 
    component: () => import('@/views/NewsPage.vue') 
  }
]

<!-- ProductDetailPage.vue reads the parameter -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id)  // '123'
</script>

const routes = [
  {
    path: '/users',
    component: () => import('@/views/UsersPage.vue'),
    children: [
      {
        path: '',  // default child route
        component: () => import('@/views/UsersListPage.vue')
      },
      {
        path: ':id',  // /users/123
        component: () => import('@/views/UserDetailPage.vue')
      }
    ]
  }
]

const routes = [
  { 
    path: '/products/:id', 
    name: 'product-detail',  // named route
    component: () => import('@/views/ProductDetailPage.vue') 
  }
]

<!-- Navigate by name to avoid hard-coded URLs -->
<router-link :to="{ name: 'product-detail', params: { id: 123 } }">
  Product 123
</router-link>

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  // ... other routes
  {
    path: '/:pathMatch(.*)*',  // matches every undefined route
    component: () => import('@/views/NotFoundPage.vue')
  }
]

A four-link nav bar plus a bordered page area.
Clicking a link changes the hash, and the matching component swaps into the page area;
the active link turns green.
The status line always shows the current route and how many entries the history stack holds, and the two buttons disable themselves at the edges of the history stack.

Click "About"   -> hash #/about   -> page: ℹ️ About / About us   (link turns green)
Click "User 123"-> hash #/user/123-> page: 👤 User 123 / User profile page
Type #/nope     -> no match       -> page: ❌ 404 Not Found
Status line     -> Current route: /about | History stack: 2 entries

A five-row cheat sheet mapping each navigation style to a code snippet and the situation it fits best.
Use the middle column as copy-paste material and the right column to pick the right style.

Renders one table: 5 rows x 3 columns (Style | Code | Best For).

import { useRouter } from 'vue-router'

const router = useRouter()

function goToProduct(id) {
  router.push(`/products/${id}`)  // string
  // or
  router.push({ name: 'product-detail', params: { id } })  // object
}

function goBack() {
  router.back()  // go back
}

function goForward() {
  router.forward()  // go forward
}

function replaceCurrent() {
  router.replace('/login')  // replace (leaves no history entry)
}

On first open (no hash in the URL) the path shows /, the page shows "Home page", and the change counter reads 0.
push('/products'): the address bar becomes #/products, the page becomes "Product list", counter 1.
replace('/search'): the address becomes #/search, the page becomes "Search results", counter 2.
Now call back() (or press the browser back button): you land straight on the original Home page — the #/products entry was overwritten by replace, so replace leaves no history behind.

// 1. Global beforeEach guard (most common)
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token')
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')  // redirect to login
  } else {
    next()  // allow navigation
  }
})

// 2. Per-route guard
const routes = [
  {
    path: '/admin',
    component: () => import('@/views/AdminPage.vue'),
    beforeEnter: (to, from, next) => {
      if (isAdmin()) next()
      else next('/403')
    }
  }
]

// 3. In-component guards
// In-component: beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token
  
  // Pages that require login
  if (to.meta.requiresAuth && !isLoggedIn) {
    return next({ 
      name: 'login', 
      query: { redirect: to.fullPath }  // come back here after login
    })
  }
  
  // A logged-in user visiting the login page
  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }
  
  next()
})

// Route meta configuration
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardPage.vue'),
    meta: { requiresAuth: true }  // requires login
  }
]

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token

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

  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }

  next()
})

// Route meta configuration
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardPage.vue'),
    meta: { requiresAuth: true }  // requires login
  }
]

No UI of its own — this is the guard that sits in front of every navigation.
With no token, visiting /dashboard redirects to /login?redirect=/dashboard;
after a successful login the redirect sends the user straight back.
A logged-in user who opens /login is bounced to home.

No token + /dashboard -> /login?redirect=%2Fdashboard
token + /login        -> /home
token + /dashboard    -> allowed, renders DashboardPage

A five-row troubleshooting table listing the routing bugs that account for most "blank page" and "stuck navigation" reports, together with the one-line fix for each.

Renders one table: 5 rows x 3 columns (Mistake | Symptom | Fix).

A five-row comparison table.
The takeaway is that lazy loading trades a slower first visit to a route for a much smaller initial bundle;
prefetch and SSR buy both back at the cost of extra setup.

Renders one table: 5 rows x 4 columns (Mode | First paint | Navigation | Best For).