Vue后台管理项目经常有权限控制，不同角色使用不同权限，常用方法就是用addRoutes来动态添加路由，但有两个问题是官方文档上找不到解决方案的

• 角色切换，addRoutes提示有重复的路由，无法删除之前角色的路由
• 刷新页面，动态路由消失，提示404

常用解决方案

网上常用的解决方案角色切换的时候刷新页面，这样之前的路由就消失了，在正常页面刷新时，将路由信息储存到localStorage中，在router.beforeEach中读出路由信息，加入到addRoutes中；

首先这样做体验一般，切换页面的刷新操作，会有明显的页面闪动，localStorage中储存路由信息也不好，很容易被修改，不安全

终极解决方案

• 角色切换时，重新创建一个Newrouter，用新的newRouter.matcher覆盖掉原来的router.matcher

  /**
   * 在router/index.js中定义$addRoutes,调用这个方法来添加路由，这个方法会先重置路由
   这个路由只会包括非权限页，比如登录页，再调用router.addRoutes添加权限路由，
   此方法亲测，完美解决，方法来自GitHub的issues,https://github.com/vuejs/vue-router/issues/2886
   */
  const constantRouterMap = [] // 默认的路由规则，比如登录页（非权限页）
  router.$addRoutes = (params) => {
    router.matcher = new VueRouter({ // 重置路由规则
      routes: constantRouterMap
    }).matcher
    router.addRoutes(params) // 添加路由
  }
  复制代码

• 刷新页面时，在router.onReady中添加动态路由，当页面刷新后，路由加载完成后，会执行router.OnReady方法，在这个方法中请求权限路由添加进入就可以了，并且这个方法只执行一次，即动态路由添加完成后，不执行这个方法，仅在刷新后执行一次

  /**
   * onReady方法可以看官方文档，不赘述了
   */
  
  router.onReady(() => {
    const status = true // 判断用户已登录且已有权限
    if (status) {
      store.dispatch(‘getJurisdiction’) // 请求动态路由
        .then(e => {
          router.addRoutes(e.list) // 添加动态路由,这里不必用$addRoutes，因为刷新后就没有上一次的动态路由，故不必清除
        })
    }
  })
  复制代码

注意事项

404页面闪现的问题，如果404页面在默认路由中，刷新页面动态路由正在加载时，页面就会短暂的显示404，解决方案就是，将404页面放在动态路由中加载，即获取动态路由后，push上404页，这样就完美解决了

有问题欢迎留言哦！

https://juejin.im/post/6844903937141637127