Vue Router

Vue Router maps URLs to components via route records: paths, nested children, named views, params, query, and meta. Navigation guards (`beforeEach`, per-route) gate access and data loading.

					const routes = [
  { path: '/users/:id', component: UserView, props: true },
  { path: '/admin', component: AdminLayout, children: [...] },
];
				

Lazy `() => import('./Page.vue')` splits bundles per route. Programmatic navigation uses `router.push` with typed params when using TypeScript.

On interviews: difference between params and query, nested routes and outlets, guard ordering, and keeping async data fetch out of guards when possible.

Common pitfalls: infinite redirect loops in guards, storing full router state in Pinia, and navigation without handling rejected promises.

The trade-off is declarative route tables versus guard complexity when auth and data loading intertwine.

Checklist:

• Model nested routes explicitly.
• Use meta for auth and titles.
• Lazy-load heavy route components.
• Handle navigation failures in UI.