vue-router的addRoutes的刷新404和重复路由的终极解决方案

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

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

常用解决方案
网上常用的解决方案角色切换的时候刷新页面，这样之前的路由就消失了，在正常页面刷新时，将路由信息储存到sessionStorage中，在router.beforeEach中读出路由信息，加入到addRoutes中；
首先这样做体验一般，切换页面的刷新操作，会有明显的页面闪动
终极解决方案

角色切换时，重新创建一个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方法可以看官方文档，不赘述了
 */
  function loadView(view){
    // 路由懒加载
    return () => import(`@/views${view}`);
}

router.onReady(() => {
    const status = true // 判断用户已登录且已有权限
    var asyncRouter = JSON.parse(sessionStorage.getItem('stateRouter'))  //获取
    for(var obj of asyncRouter){
        obj.component=() => import(/* webpackChunkName: "home" */ '@/components/Home.vue')
        for(var ary of obj.children){
            ary.component=loadView(ary.meta.componentName)
        }
    }
    router.addRoutes([...asyncRouter,...[{
        path: '*',
        component: () => import(/* webpackChunkName: "print" */ '@/views/page/403.vue'),
    }]])
})

由于异步加载，暂时还没找到解决方案，用了sessionStorage,获取本地路由，发现以前存储的components已经不见了，这里重组了components

image.png

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

原文来链接https://juejin.im/post/5d730f50518825770c43a6da