vuejs/vue-router · warning

Non-nested routes must include a leading slash character. Fi

Error message

Non-nested routes must include a leading slash character. Fix the following routes: 
${pathNames}

What it means

vue-router requires top-level (non-nested) route paths to start with '/'. During route-map creation, any path in the top-level pathList that neither starts with '/' nor '*' is collected and reported so the routes simply won't match as expected.

Source

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

  // ensure wildcard routes are always at the end
  for (let i = 0, l = pathList.length; i < l; i++) {
    if (pathList[i] === '*') {
      pathList.push(pathList.splice(i, 1)[0])
      l--
      i--
    }
  }

  if (process.env.NODE_ENV === 'development') {
    // warn if routes do not include leading slashes
    const found = pathList
    // check for missing leading slash
      .filter(path => path && path.charAt(0) !== '*' && path.charAt(0) !== '/')

    if (found.length > 0) {
      const pathNames = found.map(path => `- ${path}`).join('\n')
      warn(false, `Non-nested routes must include a leading slash character. Fix the following routes: \n${pathNames}`)
    }
  }

  return {
    pathList,
    pathMap,
    nameMap
  }
}

function addRouteRecord (
  pathList: Array<string>,
  pathMap: Dictionary<RouteRecord>,
  nameMap: Dictionary<RouteRecord>,
  route: RouteConfig,
  parent?: RouteRecord,
  matchAs?: string
) {

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Add a leading '/' to every top-level route path: 'home' -> '/home'
2. Use '*' (wildcard) only intentionally, it is exempt
3. Validate route configs before passing them to the router
4. Move the route under a parent as children if relative paths are intended

Example fix

// before
routes: [{ path: 'home', component: Home }]
// after
routes: [{ path: '/home', component: Home }]

routes.forEach(r => {
  if (typeof r.path === 'string' && r.path && r.path[0] !== '*' && r.path[0] !== '/') {
    throw new Error(`Top-level route path must start with '/': ${r.path}`)
  }
})

function hasLeadingSlash(p) { return typeof p === 'string' && (p[0] === '/' || p[0] === '*') }

When it happens

Trigger: Declaring a root route without a leading slash, e.g. routes: [{ path: 'home', component: Home }] passed directly to new Router({ routes }) — only child paths may omit the slash.

Common situations: Copying a child route config to the top level; building routes from data where the slash was stripped; nested route arrays accidentally flattened.

Related errors

• invalid redirect option: ${JSON.stringify(redirect)}
• Found an alias with the same value as the path: "${path}". Y
• props in "${route.path}" is a ${typeof config}, expecting an
• Route with path "${path}" contains unencoded characters, mak
• Named Route '${route.name}' has a default child route. When

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