Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁(yè)面問題的解決

更新時(shí)間：2023年01月14日 09:16:26 作者：沒有傘的孩子要學(xué)會(huì)努力奔跑！

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

Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁(yè)面

1.使用router.addRoutes(teacherRouter);

添加完路由切換路由時(shí)，vue會(huì)警告路由名字重復(fù)

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

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

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

2.問題

在添加后進(jìn)行頁(yè)面刷新后，動(dòng)態(tài)添加的路由會(huì)消失，路勁找不到

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

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

3.問題

切換不同角色權(quán)限，之前動(dòng)態(tài)添加的路由沒有被清除，進(jìn)入看到的還是上次進(jìn)入的權(quán)限頁(yè)面。

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

可以在退出登錄設(shè)置，也可以在添加路由時(shí)清空，以下代碼為store內(nèi)permission.js添加動(dòng)態(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 => {
? ? ? // 關(guān)鍵代碼 == 添加路由前將路由重置為空
? ? ? commit("RESET_ROUTES");
? ? ? // 設(shè)置登錄的路由權(quán)限
? ? ? let accessedRoutes;
? ?
? ? ?if (roles === 4) {
? ? ? ? // 教師登錄
? ? ? ?accessedRoutes = teacherRouter;
? ? ?}
? ? ?if (roles === 3) {
? ? ? ?// 學(xué)生登錄
? ? ? ?accessedRoutes = studentRouter;
? ? ?}

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

Vue路由動(dòng)態(tài)添加重復(fù)警告重復(fù)

動(dòng)態(tài)添加路由后，控制臺(tái)警告重復(fù)，在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自帶的原生方法，是動(dòng)態(tài)添加路由的，它并沒有刪除之前路由中原有的路由所以在permission.js中引入router，并且添加在addRoutes之前resetRouter

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