vuejs/vue-router · warning

Route with path "${path}" contains unencoded characters, mak

Error message

Route with path "${path}" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path.

What it means

vue-router detects non-ASCII (control/Unicode) characters in a route's static path and warns because the path regex will be built from unencoded characters, causing matching/URL issues in browsers. Static path segments should be percent-encoded by the developer.

Source

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

function addRouteRecord (
  pathList: Array<string>,
  pathMap: Dictionary<RouteRecord>,
  nameMap: Dictionary<RouteRecord>,
  route: RouteConfig,
  parent?: RouteRecord,
  matchAs?: string
) {
  const { path, name } = route
  if (process.env.NODE_ENV !== 'production') {
    assert(path != null, `"path" is required in a route configuration.`)
    assert(
      typeof route.component !== 'string',
      `route config "component" for path: ${String(
        path || name
      )} cannot be a ` + `string id. Use an actual component instead.`
    )

    warn(
      // eslint-disable-next-line no-control-regex
      !/[^\u0000-\u007F]+/.test(path),
      `Route with path "${path}" contains unencoded characters, make sure ` +
        `your path is correctly encoded before passing it to the router. Use ` +
        `encodeURI to encode static segments of your path.`
    )
  }

  const pathToRegexpOptions: PathToRegexpOptions =
    route.pathToRegexpOptions || {}
  const normalizedPath = normalizePath(path, parent, pathToRegexpOptions.strict)

  if (typeof route.caseSensitive === 'boolean') {
    pathToRegexpOptions.sensitive = route.caseSensitive
  }

  const record: RouteRecord = {

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Encode static segments with encodeURI: '/caf%C3%A9' instead of '/café'
2. Keep route paths ASCII and translate at the param/value level
3. Normalize/encode config-sourced paths before registering routes
4. Test that navigation to the encoded URL matches the route

Example fix

// before
{ path: '/café', component: Cafe }
// after
{ path: '/caf%C3%A9', component: Cafe }

function isEncodedPath(p) {
  return !/[^\u0000-\u007F]+/.test(p)
}
// usage: if (!isEncodedPath(route.path)) route.path = encodeURI(route.path)

function isAscii(p) { return typeof p === 'string' && /^[\x00-\x7F]*$/.test(p) }

When it happens

Trigger: Declaring a path containing literal non-ASCII characters, e.g. { path: '/café' } or { path: '/中文' }, instead of the encoded form.

Common situations: Localized route URLs typed directly in source; paths copied from browser address bars where the display decodes percent-encoding; server config strings pasted into routes.

Related errors

• props in "${route.path}" is a ${typeof config}, expecting an
• invalid redirect option: ${JSON.stringify(redirect)}
• Non-nested routes must include a leading slash character. Fi
• Named Route '${route.name}' has a default child route. When
• Found an alias with the same value as the path: "${path}". Y

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