vuejs/vue-router · warning

router.addRoutes() is deprecated and has been removed in Vue

Error message

router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.

What it means

router.addRoutes() was deprecated in Vue Router 3.x and removed in Vue Router 4; vue-router emits this deprecation warning when it is called. The method still works in 3.x (it appends routes and re-runs transitionTo), but code should move to addRoute().

Source

Thrown at src/router.js:263

      normalizedTo: location,
      resolved: route
    }
  }

  getRoutes () {
    return this.matcher.getRoutes()
  }

  addRoute (parentOrRoute: string | RouteConfig, route?: RouteConfig) {
    this.matcher.addRoute(parentOrRoute, route)
    if (this.history.current !== START) {
      this.history.transitionTo(this.history.getCurrentLocation())
    }
  }

  addRoutes (routes: Array<RouteConfig>) {
    if (process.env.NODE_ENV !== 'production') {
      warn(false, 'router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.')
    }
    this.matcher.addRoutes(routes)
    if (this.history.current !== START) {
      this.history.transitionTo(this.history.getCurrentLocation())
    }
  }
}

function registerHook (list: Array<any>, fn: Function): Function {
  list.push(fn)
  return () => {
    const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}

function createHref (base: string, fullPath: string, mode) {
  var path = mode === 'hash' ? '#' + fullPath : fullPath

View on GitHub (pinned to 680ccc68c5)

Solutions

1. Replace addRoutes(routes) with routes.forEach(r => router.addRoute(r))
2. Prefer addRoute(parentName, route) to attach children under an existing named route
3. For removal/replacement semantics, use router.removeRoute(name) or addRoute with the same name (Vue Router 4 replaces)
4. After dynamic registration, navigate/re-resolve if the current route should be re-matched

Example fix

// before
router.addRoutes(dynamicRoutes)
// after
dynamicRoutes.forEach(route => router.addRoute(route))

if (typeof router.addRoutes === 'function') {
  // vue-router 3 legacy path
  router.addRoutes(routes)
} else if (typeof router.addRoute === 'function') {
  routes.forEach(r => router.addRoute(r))
}

When it happens

Trigger: Calling router.addRoutes([...]) at runtime to register routes dynamically — e.g. after login or loading remote config — on a Vue Router 3.5+ install.

Common situations: Permission-based dynamic route registration; upgrading codebases from early vue-router 3 to 3.5+/4; documentation/tutorial code predating the addRoute API.

Understand the failure class

Background: "is deprecated and will be removed" — deprecation warnings for old API names, keywords, and options, and how to migrate before the removal release — this error's family across 29 libraries.

Related errors

• Failed to resolve async component ${key}: ${reason}
• <router-link> with to="${this.to}" is trying to use a scoped
• <router-link>'s tag prop is deprecated and has been removed
• [vue-router]: Missing current instance. ${method}() must be
• [vue-router] ${message}

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