Dynamic Routing and Navigation Guards

// router/index.js
const routes = [
  // Static: /users
  { path: '/users', component: UserListView },

  // Dynamic: /users/123, /users/alice
  { path: '/users/:id', name: 'user', component: UserDetailView },

  // Multiple params: /posts/vue-js/chapter-14
  { path: '/posts/:category/:slug', name: 'post', component: PostView },

  // Optional param: /search OR /search/vue
  { path: '/search/:query?', name: 'search', component: SearchView },

  // Regex param: /products/123 (only numbers)
  { path: '/products/:id(\\d+)', component: ProductView },
]

<!-- UserDetailView.vue -->
<script setup>
import { useRoute, onBeforeRouteUpdate } from &#039;vue-router'
import { ref, watch, onMounted } from &#039;vue'

const route = useRoute()
const user = ref(null)

async function loadUser(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
  user.value = await res.json()
}

// Load on mount
onMounted(() => loadUser(route.params.id))

// Reload when params change (user navigates /users/1 → /users/2)
// When component is REUSED, onMounted doesn't fire again!
watch(() => route.params.id, (newId) => loadUser(newId))

// OR use the route guard (alternative):
onBeforeRouteUpdate((to) => loadUser(to.params.id))
</script>

<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
    <p>Route param: {{ route.params.id }}</p>
  </div>
</template>

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,  // Layout component with <RouterView>
    children: [
      {
        path: &#039;&#039;,           // /dashboard — default child
        component: DashboardHome
      },
      {
        path: &#039;profile&#039;,   // /dashboard/profile
        component: DashboardProfile
      },
      {
        path: &#039;settings&#039;,  // /dashboard/settings
        component: DashboardSettings,
        children: [
          { path: &#039;account&#039;, component: AccountSettings },   // /dashboard/settings/account
          { path: &#039;security&#039;, component: SecuritySettings }  // /dashboard/settings/security
        ]
      }
    ]
  }
]

<!-- DashboardLayout.vue -->
<template>
  <div class="dashboard-layout">
    <aside class="sidebar">
      <RouterLink to="/dashboard">Overview</RouterLink>
      <RouterLink to="/dashboard/profile">Profile</RouterLink>
      <RouterLink to="/dashboard/settings">Settings</RouterLink>
    </aside>
    <main class="content">
      <!-- Child routes render here -->
      <RouterView />
    </main>
  </div>
</template>

// Global beforeEach guard — runs before EVERY route change
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()

  // Check if route requires auth
  if (to.meta.requiresAuth && !authStore.isLoggedIn) {
    // Redirect to login with return URL
    next({ name: 'login', query: { redirect: to.fullPath } })
  } else if (to.meta.guestOnly && authStore.isLoggedIn) {
    // Redirect logged-in users away from login/register pages
    next({ name: 'dashboard' })
  } else {
    next()  // Allow navigation
  }
})

// Global afterEach — runs after navigation completes
router.afterEach((to, from) => {
  // Update page title
  document.title = to.meta.title || 'MyApp'
  // Analytics tracking
  trackPageView(to.fullPath)
})

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { title: 'Home — MyApp' }
  },
  {
    path: '/dashboard',
    name: 'dashboard',
    component: DashboardView,
    meta: {
      title: 'Dashboard',
      requiresAuth: true,   // Protected route
      roles: ['admin', 'editor']  // Role-based access
    }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView,
    meta: { guestOnly: true, title: 'Sign In' }
  }
]

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from &#039;vue-router'
import { ref } from &#039;vue'

const hasUnsavedChanges = ref(false)

// Guard: before leaving THIS component
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    const confirm = window.confirm(&#039;You have unsaved changes. Leave anyway?')
    if (!confirm) return false  // Cancel navigation
  }
})

// Guard: before route params update (component reuse)
onBeforeRouteUpdate(async (to) => {
  await loadData(to.params.id)
})
</script>