Vue navigation and shareable views

Vue Router & URL State

Treat the URL as the authoritative source of truth for shareable view state, and handle route transitions, reused component instances and navigation guards predictably.

1. URL state vs component state

• Put state in the URL (route.params / route.query) when the user expects reload persistence, browser back/forward navigation or a shareable link: active resource IDs, search queries, filter chips, sort order, pagination page and deep-linked tabs.
• Derive typed filter/pagination values from useRoute().query via computed(), handling missing, array or malformed query values safely with defaults.
• Update filter and search query params with router.replace({ query: ... }) when typing or toggling filters so every keystroke does not clutter browser history, and router.push({ query: ... }) for distinct navigation steps.

2. Reused component instances on param changes

• Vue Router reuses the same component instance when navigating between routes that render the same component (for example, /users/1 to /users/2). onMounted will not fire again!
• Always react to parameter or query changes either by:
  • Watching () => route.params.id (with immediate: true and stale-request cancellation),
  • Using onBeforeRouteUpdate(async (to, from) => { ... }), or
  • Putting :key="route.path" on <RouterView> only when a full component remount and state reset is genuinely desired.
• Prefer props: true on route definitions when passing route params into page components so components remain decoupled and easy to test.

3. Navigation guards and unsaved changes

• Use Vue Router 4's return-based guard syntax (return false, return { name: 'login', query: { redirect: to.fullPath } }, or return true) instead of the legacy 3-argument next() callback.
• When using Pinia inside router.beforeEach((to) => { ... }), always call useAuthStore() inside the guard function body, never at module top level before app.use(pinia).
• Remember that client-side route guards improve UX (redirecting unauthenticated users early) but are never a security boundary — API endpoints and server pages must enforce authorization independently.
• Protect dirty forms from accidental navigation with onBeforeRouteLeave((to, from) => { if (isDirty.value && !confirm(...)) return false }) alongside a beforeunload listener for tab closes.

4. Lazy loading, scroll behavior and <RouterView> transitions

• Lazy-load non-critical route components with dynamic imports (component: () => import('./views/SettingsView.vue')) so initial bundles stay lean.
• When wrapping <RouterView> in <Transition> or <KeepAlive>, always use the v-slot="{ Component, route }" scoped slot pattern:

  <RouterView v-slot="{ Component }">
    <KeepAlive><component :is="Component" /></KeepAlive>
  </RouterView>
  

  and ensure any child component inside <Transition> has a single root element.

Before you finish

• Shareable view state (filters, search, sort, page, tab) lives in the URL with safe parsing and sensible push vs replace history behavior.
• Parameter changes on the same route component update state cleanly without relying on onMounted re-running.
• Guards return route locations instead of calling next(), and dirty forms warn on route leave.