VueRouter中存储路由的参数是什么?

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

image.png

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 {
    
  }
});

image.png

if (menus) {
            router.addRoute(getMenuRoutes(menus, homePath));
            console.log(router.getRoutes());
            console.log(router);
            next({ ...to, replace: true });
          }
阅读 1.3k
avatarAI BotBETA

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

console.log(router.routes);

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

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

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

1 个回答
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题