Vue.js动态添加路由后如何获取包含动态路由在内的全部路由列表

问题根因 #

• router.options.routes 是初始化Router实例时传入的静态配置，Vue Router设计上就不会在调用addRoutes后自动更新这个对象，所以永远只能拿到初始的静态路由。
• 如果getRoutes()也拿不到动态路由，分两种情况：
  1. Vue Router 3.x版本低于3.1.0：该版本才正式加入getRoutes()API，低版本不存在该方法或者返回结果不包含动态路由
  2. 调用getRoutes()的时机早于addRoutes执行完成：动态路由添加是同步操作，需确保在addRoutes执行完之后再调用获取方法

不同版本解决方案 #

如果你用的是Vue Router 3.x（对应Vue2） #

方案1：手动维护全量路由列表（最稳妥，兼容所有版本）

自己定义变量存储全量路由，每次添加动态路由时同步更新：

// 路由文件@/router/index.js
export const constantRouterMap = [{a,b,c}]
// 导出可变的全量路由数组
export let allRoutes = [...constantRouterMap]

const router = new Router({
  mode: 'history',
  routes: constantRouterMap
})

// 封装统一的动态路由添加方法对外暴露
export function addDynamicRoutes(dynamicRouters) {
  router.addRoutes(dynamicRouters)
  allRoutes = allRoutes.concat(dynamicRouters)
}

业务逻辑中直接调用封装好的方法即可：

import { addDynamicRoutes, allRoutes } from '@/router'
// 添加动态路由
addDynamicRoutes(dynamicRouters)
// 直接获取全量路由
console.log(allRoutes)

方案2：通过内部属性获取（临时hack方案，不推荐跨版本使用）

3.x版本路由实例内部的matcher存储了全量路由，可以直接读取：

const allRoutes = router.getRoutes ? router.getRoutes() : router.matcher.getRoutes()

如果你用的是Vue Router 4.x（对应Vue3） #

addRoutes已经被官方废弃，替换为逐个添加路由的addRoute方法，getRoutes()API已经稳定，只要确保在所有addRoute执行完成后调用，就能拿到包含动态路由的全量列表：

// 批量添加动态路由
dynamicRouters.forEach(route => router.addRoute(route))
// 直接获取全量路由
const allRoutes = router.getRoutes()

内容的提问来源于stack exchange，提问作者uonlyYOLOonce