vuejs/vue-router · warning · Error

[vue-router] ${message}

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).

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)

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

• [vue-router]: Missing current instance. ${method}() must be
• uncaught error during route navigation:
• Failed to resolve async component ${key}: ${reason}
• In Vue Router 4, the v-slot API will by default wrap its con
• <router-link> with to="${this.to}" is trying to use a scoped

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