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页，这样就完美解决了
