Routing and SPA Navigation

Overview

Routing is architecture. A strong route system aligns URL semantics, authorization, layout composition, and data loading behavior.

Route Design Strategy

URL as a product contract

• Use stable route names and path patterns tied to business concepts.
• Avoid exposing internal implementation terms in route segments.
• Model hierarchy with nested routes for dashboards, settings, and details pages.

Nested layouts

const routes = [
  {
    path: '/billing',
    component: BillingLayout,
    children: [
      { path: '', component: BillingOverview },
      { path: 'invoices/:invoiceId', component: InvoiceDetails }
    ]
  }
]

Route Guards and Access Control

Global guard pattern

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { name: 'login', query: { redirect: to.fullPath } }
  }
})

Authorization model

Authentication verifies identity. Authorization verifies permission. Keep both explicit in route metadata and backend policy checks.

URL and UI State Synchronization

Query param state

router.push({
  name: 'users',
  query: { page: String(page.value), filter: filter.value }
})

Persist list filters, sorting, and pagination in URL for shareable and restorable navigation.

Learning Objectives

• Configure nested routes and layout shells.
• Apply route guards for auth and role access.
• Keep URL state and UI state synchronized.

Common Mistakes

• Hardcoding authorization checks in components instead of route/meta + backend policy layers.
• Not handling redirect-after-login flows for protected routes.
• Treating route names and path formats as disposable, creating broken bookmarks and docs.

Engineering Notes

Create a route catalog document with path, purpose, auth requirements, owner team, and analytics event mapping.

Practice Scope

Deliver one production-style mini-feature, include implementation notes, and record one performance, reliability, or maintainability trade-off in your commit summary.

Back to roadmap: Vue Roadmap