vuejs/vue-router · warning · Error

[vue-router]

Error message

[vue-router] ${message}

What it means

This is the dev-only warning (console.warn, not a throw) emitted from abort() in the history base class when an error occurs during route navigation and no onError handler is registered. It tells you a navigation guard or async component rejected and the error was 'uncaught' from the router's perspective. The original error is printed immediately after via console.error(err).

Solutions

1. Register router.onError(handler) to catch and handle/log navigation errors explicitly.
2. Check the console.error output below the warning for the real error (often a chunk load error or guard exception).
3. Handle chunk-load failures by detecting them in onError and reloading the page: if (/Chunk|Loading.+failed/.test(err.message)) window.location.reload().
4. Fix the underlying guard/async-component code that produced the error.

Example fix

// before
const router = new VueRouter({ routes })
// after
const router = new VueRouter({ routes })
router.onError(err => {
  console.error('navigation failed:', err)
  if (/Loading chunk \d+ failed/.test(err.message)) window.location.reload()
})

// validate router options before constructing
function validRouterOptions (opts) {
  return opts && typeof opts === 'object' &&
    ['hash', 'history', 'abstract'].includes(opts.mode || 'hash') &&
    Array.isArray(opts.routes)
}

function isRouterOptions (o) {
  return !!o && typeof o === 'object' && typeof o.routes === 'undefined' || Array.isArray(o && o.routes)
}

try {
  const router = new VueRouter(options)
} catch (e) {
  if (e.message.startsWith('[vue-router]')) {
    console.error('Invalid router configuration:', e.message)
    // fall back to safe defaults
  } else throw e
}

When it happens

Trigger: next(err)/abort(err) is called during navigation — e.g. a beforeEach guard calls next(new Error(...)), an async route component fails to load, or a promise in a guard rejects — while router.onError() was never called.

Common situations: Chunk load failures (ChunkLoadError) after a deploy invalidates old JS chunks; guards throwing inside async code; redirect loops or errors in navigation guards on production builds that only show up in the console.

Related errors

• Duplicate named routes definition
• Duplicate param keys in route with path
• ${e.message}
• Error decoding " ". Leaving it intact.
• Failed to resolve async component

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

Appendix: source

Thrown at src/util/warn.js:5

/* @flow */

export function assert (condition: any, message: string) {
  if (!condition) {
    throw new Error(`[vue-router] ${message}`)
  }
}

export function warn (condition: any, message: string) {
  if (!condition) {
    typeof console !== 'undefined' && console.warn(`[vue-router] ${message}`)
  }
}

View on GitHub (pinned to 680ccc68c5)