前端 - VueRouter中存储路由的参数是什么？

Question

在路由导航守卫中，router.addRoute(getMenuRoutes(menus, homePath));这段代码添加了动态路由，VueRouter存储的路由在哪个参数里？我在router.options.routes中只找到了静态路由，没发现添加的动态路由

const router = new VueRouter({  routes,  // mode: 'history',  mode: 'hash',  scrollBehavior() {    return { y: 0 };  }});

router.beforeEach(async (to, from, next) =>  {  if (!from.path.includes(REDIRECT_PATH)) {    NProgress.start();  }  // 判断是否登录  if (getToken()) {    // 还未注册动态路由则先获取    if (!store.state.user.menus) {      store        .dispatch('user/fetchUserInfo')        .then(({ menus, homePath }) => {          if (menus) {            router.addRoute(getMenuRoutes(menus, homePath));            console.log(router);            next({ ...to, replace: true });          }        })        .catch((e) => {          // console.error(e);          next();        });    } else {      next();    }  } else if (WHITE_LIST.includes(to.path)) {    next();  } else {      }});

---

if (menus) {            router.addRoute(getMenuRoutes(menus, homePath));            console.log(router.getRoutes());            console.log(router);            next({ ...to, replace: true });          }

Answer 1

请查看getMenuRoutes函数，如果是框架的话，大部分会存在嵌套路由的情况，你点开routes查看一下，是否存在children数组

Answer 2

在 VueRouter 中，addRoute 添加的路由会被存储在 router.routes 参数中。

console.log(router.routes);

运行上面的代码，你可以看到所有静态路由和通过 addRoute 添加的动态路由。

注意，如果你在路由被注册之后添加了新的路由，你需要重新创建和挂载 router 实例才能使新路由生效。因为 VueRouter 在初始化时只会解析和存储静态路由，动态添加的路由需要重新挂载才能生效。

如果你想在控制台查看所有路由，你需要在控制台打印 router.routes，而不是 router。router.routes 存储了所有的路由，包括静态路由和动态路由。