vue 重置路由不生效

Question

vue使用动态添加路由，重置路由没有生效

使用的以下方法重置的路由

export function resetRouter () {
  router.matcher = new Router({
    mode: 'hash',
    base: process.env.VUE_APP_PUBLICPATH,
    scrollBehavior: () => ({
      y: 0
    }),
    routes: [...constantRoutes]
  }).matcher // reset router
}

而且用这个方法，固定的路由是可以重置。但是使用router.addRoutes()这个方法动态添加的路由就不行了。

我需要做的功能是，不同的权限显示不同的路由。就是退出登录就需要重置路由。不然显示的还是之前的路由。

目前除了上面这个重置路由的方法，我能想到的就只有刷新页面去重置路由了

有没有，还有其他方法的？望各位大神指教一下，谢谢！

Answer 1

可以参考我的解决方案：

https://gitee.com/ericfang/ea...

addRoutes 之后在重置 matcher 即可；

clearRoute(state) {
  state.menuTree = [];
  state.routeAuthList = [];
  router.options.routes[0].children = [];
  router.addRoutes(router.options.routes);
  router.matcher = new Router({
      routes: router.options.routes,
  });
},

Answer 2

可以先看看 vue-router@4 文档，vue-router@4 不存在 matcher 属性，通过新增的 removeRoute api来移除路由。

只需要在 addRoute 前删除原路由就可以了。如果 addRoute 添加的是一个嵌套路由（带 children），需要递归删除。

/**
* 删除嵌套路由
* @param route
*/
const deepDelete = (route: RouteRecordRaw) => {
  router.removeRoute(route.name);
  route.children?.forEach((item) => deepDelete(item));
};

/**
* 添加嵌套路由
* @param routes
*/
const addRoutes = (routes: RouteRecordRaw[]) => {
  routes.forEach((item) => {
    deepDelete(item); // 避免重复添加路由
    router.addRoute(item);
  });
};