526互联

vue-router动态路由 - 角色切换或退出登录时重置路由表

发布时间 2024-01-02 16:07:26作者: 梦里起风了

vue-router@4以上可以使用removeRoute()方法来移除.

router.getRoutes().forEach(route => {
  // 这里还需要条件判断哪些是静态路由不需要移除
  router.removeRoute(route.name);
});

但是vue-router@3的话,只能使用location.reload()的方式去属性页面.

但是刷新的时机也要选对,我本来试了一下在重新获取到权限的时候进行刷新,但是会导致跳转到目标页后多一次刷新的动作,然后就会导致闪一下.

后来想了一下,发现在路由钩子,进去的时候,也就是例如过期或者手动退出之后,要进去到login页的时候,判断当前路由表是否初始路由表长度,以及是否携带重定向参数来决定是否需要reload.

例如:

// ...
// 路由守卫
router.beforeEach((to, from, next) => {
  // !!!注意: 如果静态路由有变改,记得同步修改判断!!!
  if (to.path === '/user/login' && to.query.redirect && router.getRoutes().length !== 9) {
    location.reload()
  }
  // ...
}

个人经验,如果有更好的方法欢迎留言补充更正:)