vuejs/vue-router · warning

Named Route '${route.name}' has a default child route. When

Error message

Named Route '${route.name}' has a default child route. When navigating to this named route (:to="{name: '${route.name}'}"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.

What it means

A named route that has a default child route (a child whose path is '' or '/') triggers this warning because navigating by the parent's name will not render the default child — the parent record's own (usually empty) rendering wins. vue-router advises naming the default child instead.

Source

Thrown at src/create-route-map.js:127

    props:
      route.props == null
        ? {}
        : route.components
          ? route.props
          : { default: route.props }
  }

  if (route.children) {
    // Warn if route is named, does not redirect and has a default child route.
    // If users navigate to this route by name, the default child will
    // not be rendered (GH Issue #629)
    if (process.env.NODE_ENV !== 'production') {
      if (
        route.name &&
        !route.redirect &&
        route.children.some(child => /^\/?$/.test(child.path))
      ) {
        warn(
          false,
          `Named Route '${route.name}' has a default child route. ` +
            `When navigating to this named route (:to="{name: '${
              route.name
            }'}"), ` +
            `the default child route will not be rendered. Remove the name from ` +
            `this route and use the name of the default child route for named ` +
            `links instead.`
        )
      }
    }
    route.children.forEach(child => {
      const childMatchAs = matchAs
        ? cleanPath(`${matchAs}/${child.path}`)
        : undefined
      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
    })
  }

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Remove the name from the parent route and put it on the default child: { name: 'parent' } on the '' path child
2. Update all :to="{ name: ... }" links to use the child's name
3. Give the child an explicit path like 'default' if index semantics aren't needed
4. Or add a redirect on the parent to the child path

Example fix

// before
{ path: '/parent', name: 'parent', component: Parent, children: [{ path: '', component: Default }] }
// after
{ path: '/parent', component: Parent, children: [{ path: '', name: 'parent', component: Default }] }

routes.forEach(r => {
  if (r.name && Array.isArray(r.children) && r.children.some(c => /^\/?$/.test(c.path))) {
    const def = r.children.find(c => /^\/?$/.test(c.path))
    r.name = undefined
    def.name = def.name || r.path.replace(/^\//, '')
  }
})

function hasDefaultChildWithName(r) {
  return Boolean(r.name) && Array.isArray(r.children) && r.children.some(c => /^\/?$/.test(c.path))
}

When it happens

Trigger: Config like { path: '/parent', name: 'parent', children: [{ path: '', component: Default }] } and then navigating to { name: 'parent' } or <router-link :to="{ name: 'parent' }">.

Common situations: Index/default child patterns in layouts; migrating from flat routes to nested ones while keeping the parent's name; named links generated from a route table.

Related errors

• props in "${route.path}" is a ${typeof config}, expecting an
• Duplicate named routes definition: { name: "${name}", path:
• invalid redirect option: ${JSON.stringify(redirect)}
• Non-nested routes must include a leading slash character. Fi
• Route with path "${path}" contains unencoded characters, mak

AI-assisted analysis of vuejs/vue-router@680ccc68c5 (2026-09-02). Data as JSON: /api/errors/79e47f0c7e2a1dae. Report an issue: GitHub.