Vue后臺管理項目經(jīng)常有權(quán)限控制，不同角色使用不同權(quán)限胰坟，常用方法就是用addRoutes來動態(tài)添加路由怀读，但有兩個問題是官方文檔上找不到解決方案的
角色切換，addRoutes提示有重復(fù)的路由诈闺，無法刪除之前角色的路由
刷新頁面，動態(tài)路由消失铃芦，提示404
常用解決方案
網(wǎng)上常用的解決方案角色切換的時候刷新頁面雅镊，這樣之前的路由就消失了，在正常頁面刷新時刃滓，將路由信息儲存到sessionStorage中仁烹，在router.beforeEach中讀出路由信息，加入到addRoutes中咧虎；
首先這樣做體驗一般卓缰，切換頁面的刷新操作，會有明顯的頁面閃動
終極解決方案
角色切換時，重新創(chuàng)建一個Newrouter征唬，用新的newRouter.matcher覆蓋掉原來的router.matcher
/**
* 在router/index.js中定義$addRoutes,調(diào)用這個方法來添加路由捌显，這個方法會先重置路由
這個路由只會包括非權(quán)限頁，比如登錄頁总寒，再調(diào)用router.addRoutes添加權(quán)限路由扶歪，
此方法親測，完美解決偿乖，方法來自GitHub的issues,https://github.com/vuejs/vue-router/issues/2886
*/
const constantRouterMap = [] // 默認(rèn)的路由規(guī)則击罪，比如登錄頁（非權(quán)限頁）
router.$addRoutes = (params) => {
router.matcher = new VueRouter({ // 重置路由規(guī)則
routes: constantRouterMap
}).matcher
router.addRoutes(params) // 添加路由
}
刷新頁面時，在router.onReady中添加動態(tài)路由贪薪，當(dāng)頁面刷新后媳禁，路由加載完成后，會執(zhí)行router.OnReady方法画切，在這個方法中請求權(quán)限路由添加進(jìn)入就可以了竣稽，并且這個方法只執(zhí)行一次，即動態(tài)路由添加完成后霍弹，不執(zhí)行這個方法毫别，僅在刷新后執(zhí)行一次
/**
* onReady方法可以看官方文檔，不贅述了
*/
function loadView(view){
// 路由懶加載
return () => import(`@/views${view}`);
}
router.onReady(() => {
const status = true // 判斷用戶已登錄且已有權(quán)限
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,獲取本地路由，發(fā)現(xiàn)以前存儲的components已經(jīng)不見了耍缴，這里重組了components
注意事項
404頁面閃現(xiàn)的問題砾肺，如果404頁面在默認(rèn)路由中，刷新頁面動態(tài)路由正在加載時防嗡，頁面就會短暫的顯示404变汪，解決方案就是，將404頁面放在動態(tài)路由中加載蚁趁，即獲取動態(tài)路由后裙盾，push上404頁，這樣就完美解決了
