Vue動態(tài)路由路徑重復及刷新丟失頁面問題的解決

更新時間：2023年01月14日 09:16:26 作者：沒有傘的孩子要學會努力奔跑！

這篇文章主要介紹了Vue動態(tài)路由路徑重復及刷新丟失頁面問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue動態(tài)路由路徑重復及刷新丟失頁面

1.使用router.addRoutes(teacherRouter);

添加完路由切換路由時，vue會警告路由名字重復

問題出現(xiàn)原因是：動態(tài)路由添加時調(diào)傭addRoutes();它只會幫你注入路由，不會幫你把前面的路由清掉。如此一來就重復添加了。

解決方法：路由動態(tài)添加關鍵頁面需要在路由配置頁（router/index.js）添加自定義方法

router.$addRoutes = params => {
? router.matcher = new Router({
? ? routes: router.options.routes
　　// 關鍵代碼
? }).matcher;
? router.addRoutes(params);
};

2.問題

在添加后進行頁面刷新后，動態(tài)添加的路由會消失，路勁找不到

可以使用localstorage緩存，頁面路由權限判斷頁（promission.js）用了路由beforeEach可以直接判斷路由刷新：

if (from.name === null) {
? ? ? // 刷新
? ? ? router.$addRoutes(accessRoutes);
? ? ? // 確保頁面加載完成
? ? ? next({ ...to, replace: true });
? }?

3.問題

切換不同角色權限，之前動態(tài)添加的路由沒有被清除，進入看到的還是上次進入的權限頁面。

問題在于vue的store沒有被清空，把store里的route清空就行：

可以在退出登錄設置，也可以在添加路由時清空，以下代碼為store內(nèi)permission.js添加動態(tài)路由前清空路由

const mutations = {
? SET_ROUTES: (state, routes) => {
? ? state.addRoutes = routes;
? ? state.routes = constantRoutes.concat(routes);
? },
? RESET_ROUTES: (state, payLoad) => {
? ? state.addRoutes = [];
? ? state.routes = [];
? }
};?

generateRoutes({ commit }, roles) {
? ? return new Promise(resolve => {
? ? ? // 關鍵代碼 == 添加路由前將路由重置為空
? ? ? commit("RESET_ROUTES");
? ? ? // 設置登錄的路由權限
? ? ? let accessedRoutes;
? ?
? ? ?if (roles === 4) {
? ? ? ? // 教師登錄
? ? ? ?accessedRoutes = teacherRouter;
? ? ?}
? ? ?if (roles === 3) {
? ? ? ?// 學生登錄
? ? ? ?accessedRoutes = studentRouter;
? ? ?}

? ? ?commit("SET_ROUTES", accessedRoutes);
? ? ?resolve(accessedRoutes);
? ?});?

Vue路由動態(tài)添加重復警告重復

動態(tài)添加路由后，控制臺警告重復，在router.js中添加下面代碼

const createRouter = () => new Router({
?? ? mode: 'history',
?? ? routes: constantRoutes
})
const router = createRouter()
export function resetRouter () {
?? ?const newRouter = createRouter()
?? ?router.matcher = newRouter.matcher
}
export default router

addRoutes()方法是router自帶的原生方法，是動態(tài)添加路由的，它并沒有刪除之前路由中原有的路由所以在permission.js中引入router，并且添加在addRoutes之前resetRouter

import router,{resetRouter} from './router'
store.dispatch('GenerateRoutes').then(accessRoutes => {
? ? // 根據(jù)roles權限生成可訪問的路由表
?? ?resetRouter()
?? ?router.addRoutes(accessRoutes)// 動態(tài)添加可訪問路由表
})