In Vue Router 5, why does push({ name: 'settings' }) show an empty settings pane while reloading /settings shows the overview child?

## Two routes, one URL With an empty-path child, two records produce the same path: ```ts { path: '/settings', name: 'settings', // the problem component: SettingsLayout, children: [ { path: '', component: SettingsOverview }, { path: 'profile', component: SettingsProfile }, ], } ``` - The parent's path is `/settings`. - The empty child's path joins to `/settings` too. Both are matchable, and they reach the screen by different mechanisms. ## Matching by path versus by name | Navigation | Record matched | `route.matched` | Pane shows | |---|---|---|---| | reload or paste `/settings` | the empty-path child | parent, child | `SettingsOverview` | | `push('/settings')` | the empty-path child | parent, child | `SettingsOverview` | | `push({ name: 'settings' })` | the parent itself | parent | nothing | When matching by **path**, the router keeps records sorted by score, and a child whose score equals its ancestor's is inserted **ahead** of that ancestor. The empty-path child therefore wins. When navigating by **name**, there is no matching step: the router looks up the record with that name. If the name is on the parent, the parent is the deepest matched record, and the layout's `RouterView` has nothing at depth 1 to render. The docs describe exactly this: naming the parent lets you navigate to it without the nested route, but **a reload always shows the nested child**, because the reload is a path navigation. ## The fix: name the child ```ts children: [ { path: '', name: 'settings', component: SettingsOverview }, { path: 'profile', name: 'settings-profile', component: SettingsProfile }, ] ``` Now `push({ name: 'settings' })` and a reload both land on the overview. The router backs this up in two ways: 1. In development it **warns** when a route with a name has a child with no name, an empty path and no children of its own, since using the parent's name will not render that child. 2. Since Vue Router 4.5 it **throws in development** when a child or descendant is given the same name as an ancestor, so you cannot fix this by copying the name to both. Keep a name on the parent only if you deliberately want a way to show the layout with an empty pane. ## The empty-path child's URL A named empty-path child resolves **without** a trailing slash: `router.resolve({ name: 'settings' }).href` is `/settings`. That has a side effect for relative redirects inside children: `{ path: '', redirect: 'profile' }` resolves relative to `/settings`, which gives `/profile`, not `/settings/profile`. Redirect to a name, or to an absolute path, instead. ## A parent with no component Since Vue Router 4.1, a parent record may omit `component` and `components`: ```ts { path: '/settings/admin', meta: { requiresAdmin: true }, children: [ { path: 'users', component: AdminUsers }, { path: 'audit', component: AdminAudit }, ], } ``` - The parent still contributes its **path prefix**, and anything else declared on it, such as meta fields or a per-route guard, applies to all children. - `RouterView` **skips** a matched record with no components, so the children render in the `RouterView` that would otherwise have shown the parent. No extra layout level is added. - A parent with no component, no name and no redirect is not itself matchable: visiting `/settings/admin` directly falls through to other routes, such as a catch-all, unless you add an empty-path child. ## Proving it in a test `router.resolve()` shows the difference without mounting anything: 1. `router.resolve({ name: 'settings' }).matched.length` is `1` when the name is on the parent: only the layout record. 2. `router.resolve('/settings').matched.length` is `2`: the layout and the empty-path child. 3. After moving the name to the child, both calls return `2`. A test asserting that the two agree catches the mistake the moment someone moves a name. ## Summary of rules - Fill a layout's default pane with an empty-path child. - Put the name on that child. - Never reuse a name between a parent and its descendants. - Omit the parent's component when you only need a shared prefix or shared route options.