vuejs/vue-router · warning

props in "${route.path}" is a ${typeof config}, expecting an

Error message

props in "${route.path}" is a ${typeof config}, expecting an object, function or boolean.

What it means

When navigating by name (router.push({ name }) or :to="{ name }") the matcher looks the name up in nameMap. In dev mode, if no route record has that name, warn() logs "Route with name 'x' does not exist" and the router falls back to creating an empty/failed route match (no navigation occurs). This is vue-router 3's dev-time signal for a typo'd or unregistered named route.

Source

Thrown at src/components/view.js:148

        delete propsToPass[key]
      }
    }
  }
}

function resolveProps (route, config) {
  switch (typeof config) {
    case 'undefined':
      return
    case 'object':
      return config
    case 'function':
      return config(route)
    case 'boolean':
      return config ? route.params : undefined
    default:
      if (process.env.NODE_ENV !== 'production') {
        warn(
          false,
          `props in "${route.path}" is a ${typeof config}, ` +
          `expecting an object, function or boolean.`
        )
      }
  }
}

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Fix the route name in the push/to call to exactly match a registered route's name (names are case-sensitive).
2. Ensure the route is registered before navigation — register it in the routes array or call addRoutes before pushing.
3. Guard programmatic navigation: check the route exists (e.g. via router.resolve({ name })) or add a beforeEach to detect unmatched routes.
4. In production, also handle the resulting empty match (e.g. a catch-all 404 route).

Example fix

// before
router.push({ name: 'usr-profile', params: { id: 1 } })
// routes: [{ path: '/user/:id', name: 'userProfile', component: User }]
// after
router.push({ name: 'userProfile', params: { id: 1 } })

// before navigating by name, verify it resolves
function routeNameExists (router, name) {
  const resolved = router.resolve({ name })
  return resolved && resolved.route && resolved.route.matched.length > 0
}
if (routeNameExists(router, 'userProfile')) router.push({ name: 'userProfile' })

function isNamedLocation (loc) {
  return !!loc && typeof loc === 'object' && typeof loc.name === 'string' && loc.name.length > 0
}

try {
  const resolved = router.resolve({ name: 'userProfile' })
  if (!resolved.route.matched.length) throw new Error("Route with name 'userProfile' does not exist")
  router.push({ name: 'userProfile' })
} catch (e) {
  router.push('/404')
}

When it happens

Trigger: router.push({ name: 'Home' }) where no route was defined with name: 'Home'; case mismatches ('home' vs 'Home'); navigating before routes are registered (addRoutes not yet called); renamed routes after refactor.

Common situations: Typos in route names; routes added dynamically via router.addRoutes() after an async init but navigated to earlier; using names from a different router instance; upgrades where route names changed.

Related errors

• Named Route '${route.name}' has a default child route. When
• 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/01221ac0ecea7af6. Report an issue: GitHub.