skip to content

Vue Router

2 roadmaps36 questions

Vue's official router maps URLs to nested component trees, guards every navigation and, since v5, generates typed routes from files. Interviewers probe guard order and param reuse.

on this pageshow

explore

questions

page 2 of 2

In Vue Router 5, legacy catalogue URLs like /catalog/item/:id must keep working; when do you use a redirect record versus an alias, and what does each cost?

level: seniorimportance: should knowfreq 40%

basics

~20 s

A redirect replaces the legacy URL with the new one before any guard runs; an alias keeps the legacy URL in the address bar while rendering the target record. Redirect retires old URLs; alias serves two permanent URLs.

open as a page

In Vue Router 5, a job-search page runs `await router.push()` for each filter change; what can that promise settle with, and how do you tell the outcomes apart?

level: seniorimportance: should knowfreq 45%

basics

~20 s

router.push() resolves undefined on success, including after a guard redirect; resolves with a navigation failure (aborted, cancelled or duplicated) when the user stays put; and rejects when a guard or lazy component throws. isNavigationFailure(result, type) tells failures apart.

open as a page

In Vue Router 5, an app's `scrollBehavior` always returns `{ top: 0 }`; why does a job-search page jump on every filter change and lose its place on Back, and what fixes it?

level: seniorimportance: should knowfreq 38%

basics

~10 s

The function treats every navigation alike and discards savedPosition. Return savedPosition on Back and Forward, after the list has rendered; return false when only the query changed; scroll to the top otherwise.

open as a page

In Vue Router 5, the mail client's fade never plays between messages, and after adding :key="route.fullPath" the settings sidebar resets on every tab; how do keys and nesting explain both?

level: seniorimportance: should knowfreq 36%

basics

~20 s

The same component is reused between messages, so Transition has nothing to animate until a key forces a remount. A fullPath key on the outer view remounts the layout on every child switch; key each level on what it owns.

open as a page

Upgrading a Vue 2 admin app from Vue Router 3 to Vue Router 5, which router setup code breaks, and what does Vue Router 5 itself change?

level: seniorimportance: should knowfreq 38%

basics

~20 s

Vue Router 4 broke the setup: new VueRouter becomes createRouter, mode and base become a history factory and its argument, onReady becomes isReady, and currentRoute becomes a ref; Vue Router 5 adds no breaks for a plain v4 app.

open as a page

In Vue Router 5, what does opening `/billing/invoices` download when parent and child are lazy, and how do you bundle both together?

level: middleimportance: nice to knowfreq 30%

basics

~20 s

Both chunks, requested together: the router calls the loader of every record the navigation enters and confirms once all resolve. Later sibling visits load only the new child. Merging them into one chunk is bundler configuration.

open as a page

showing 31–36 of 36