Vue Router

Register router.beforeEach((to) => …) and, when to.meta.requiresAuth is set and nobody is signed in, return { name: 'login', query: { redirect: to.fullPath } }. Returning nothing lets every other navigation through; keep the login route itself unprotected.

Give the route a loader, component: () => import('./Billing.vue'); the router calls it on first entry, waits for it and caches the result. Without the arrow the import runs at startup, and development warns that production will break.

The :id segment matches exactly one non-empty path segment, so /products/42 matches and /products/42/reviews does not; a component reads it as useRoute().params.id, a decoded string.

<RouterLink> renders a real <a> whose href the router resolves, and a plain left click calls router.push() (or router.replace() with replace). A clickable <div> calling router.push() has no URL: no new tab, copy-link or keyboard focus.

Give the /settings record a SettingsLayout component and a children array with relative paths like 'profile'; SettingsLayout renders the sidebar plus its own RouterView, which shows the matched child while the layout stays mounted.

createWebHistory gives clean URLs but needs a server fallback to index.html; createWebHashHistory keeps the route after #, needing no server setup but hurting SEO; createMemoryHistory ignores the URL and suits SSR and tests.

Nothing or true lets the navigation continue to the next guard; a route location drops it and starts a new navigation there; false cancels it and resets the URL to from; a thrown Error cancels it and calls router.onError() handlers.

Both URLs match the same record, so RouterView patches the existing component instead of remounting it; setup and onMounted do not run again. Watch route.params.id, or the prop from props: true, with immediate: true.

Copy the current query into the new location: router.push({ query: { ...route.query, remote: 'true', page: undefined } }). A location with only query stays on the current route, but its query replaces the old one, so omitted keys vanish.

Transition and KeepAlive must act on the route component, not on RouterView; the v-slot passes that component as Component, plus the displayed route, and you render it with <component :is> inside them.

definePage() is a build-time macro that overrides a page's route record: name, path, alias, meta and other record fields. The plugin extracts its argument and removes it from the component, so it cannot reference bindings declared in script setup.

A .vue file with the same name as a folder becomes the parent route, and the folder's pages render inside its RouterView. To add /posts/new outside that layout, name the file posts.new.vue; the dot becomes a slash without nesting.

onBeforeRouteLeave runs only when the route record rendering the form is left. /employees/7/edit to /employees/8/edit keeps the same record and component instance, so only onBeforeRouteUpdate runs; register the same check in both and return false to stay.

A plain loader lets the router load the page's code before confirming and run its guards. defineAsyncComponent hands over a ready-looking wrapper: the router confirms at once, misses the page's Options API guards, and warns in development.

props: true passes route.params as props, an object passes fixed props as-is, and a function receives the route and returns props, which is how you cast ids to numbers or pass query values.

A + param repeats over one or more segments and yields an array, so /docs/guide/setup gives ['guide', 'setup']; /:pathMatch(.) matches any path, ranks below specific routes, and yields the segments as an array.

RouterLink's active matching compares the route record and params only, never the query, so every ?page=N link on the same route is active and exact-active. Compare route.query.page yourself through custom with its slot, or through useLink.

The name sits on the parent, so a named push matches only the parent and its RouterView stays empty, while a path match prefers the empty-path child. Put the name on the empty-path child instead.

A record's components map (default, detail, ...) fills several RouterViews at the same depth, each selected by its name prop; nested routes instead stack one view inside another. Views without a component for the route render nothing.

app.use(router) registers RouterLink and RouterView, exposes $router and $route, and in the browser starts the asynchronous first navigation; awaiting isReady() mounts only after it finishes, avoiding an empty first render and a spurious enter transition.

createMemoryHistory keeps locations in memory, so the server needs no window and tests share no URL; push the starting route and await router.isReady() before rendering, because on the server nothing starts the first navigation.

Set Vite's base to /admin/, pass import.meta.env.BASE_URL to createWebHistory(), keep route paths app-relative like /users, and make nginx fall back to /admin/index.html for unknown paths under /admin/.

Route names change first: generated names like /posts/[slug] break every push by the old name. Keep names with definePage({ name }) or update callers, append redirects to the generated routes array, and turn beforeEnter guards into meta checked by a global guard.

The plugin writes a declaration file whose RouteNamedMap lists each route's name, path and params and plugs it into Vue Router's TypesConfig. Named pushes then check names and params, but string paths, runtime-added routes and a stale file slip through.

A guard declared with a third next parameter is resolved only when next is called, so a branch that forgets it hangs the navigation; next is deprecated in Vue Router 5. Drop the parameter and return the value you passed to next.

Leave guards of the edit form, global beforeEach, update guards of reused components, the payroll record's beforeEnter, the lazy component loads, its beforeRouteEnter, global beforeResolve, confirmation, afterEach, the DOM update, then next(vm) callbacks.

to was resolved before the reports route existed, so it matched the catch-all. After addRoute(), return to.fullPath so the URL is resolved again; returning to re-resolves by the catch-all's name. Add the routes once, or it loops.

Add each feature's records with router.addRoute('dashboard', record) and keep the removers it returns, or give records names for router.removeRoute(name). On a tenant switch, navigate to a neutral page first, then remove the old set and add the new one.

Vue Router ranks records by a per-segment score: static segments beat params, a custom regex beats a plain param, and optional, repeatable and wildcard params score lower. Array order only breaks exact ties.