vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解
動態(tài)路由刷新出現(xiàn)空白頁:
原因:刷新頁面的時候動態(tài)路由會刷新掉,然后動態(tài)路由會重新加載,而匹配路由會在加載路由之前,所以會導(dǎo)致空白頁
router.beforeEach(async (to, from, next) => {
const whiteList = ['/login']
let token = store.getters.GET_TOKEN;//token
let hasRoutes=store.state.hasRoutes; //默認是false,刷新頁面這個也是false
let menuList=store.getters.GET_MENULIST; //后端返回的菜單列表
if (token) {
if(!hasRoutes){
bindRoute(menuList);//添加動態(tài)路由
store.commit("SET_ROUTES_STATE",true);
}
next();
} else {
if (whiteList.includes(to.path)) {
next();
} else {
next('/login');
}
}
})
//添加動態(tài)路由
const bindRoute = (menuList) => {
let newRoutes = router.options.routes;
menuList.forEach(menu => {
if (menu.children) {
menu.children.forEach(m => {
// 菜單轉(zhuǎn)成路由
let route = menuToRoute(m, menu.name);
if (route) {
newRoutes[0].children.push(route); // 添加到路由管理
}
})
}
})
// 重新添加到路由
newRoutes.forEach(route => {
router.addRoute(route)
})
}
// 菜單轉(zhuǎn)成路由
const menuToRoute = (menu, parentName) => {
let route = {
name: menu.name,
path: menu.path,
meta: {
parentName: parentName
},
children:[],
}
if (!menu.component) {
route.component = ''
} else {
route.component = () => import('@/views/' + menu.component + '.vue')
}
return route
}解決辦法:遞歸再調(diào)用beforEach,或者直接跳回首頁
在你加載路由的地方
遞歸調(diào)用:next({ …to, replace: true });(慎用,如果你的后臺管理table是帶標簽會有問題,沒有放對位置會死循環(huán))
跳回首頁:next({path:‘/index’})附上解決的代碼:
router.beforeEach(async (to, from, next) => {
const whiteList = ['/login']
let token = store.getters.GET_TOKEN;
let hasRoutes=store.state.hasRoutes;
let menuList=store.getters.GET_MENULIST;
if (token) {
console.log(store.state.editabTabs)
if(!hasRoutes){
bindRoute(menuList);
store.commit("SET_ROUTES_STATE",true);
//next({ ...to, replace: true });//----------解決
next({path:'/index'}); //----------解決
}
next();
} else {
if (whiteList.includes(to.path)) {
next();
} else {
next('/login');
}
}
})
//添加動態(tài)路由
const bindRoute = (menuList) => {
let newRoutes = router.options.routes;
menuList.forEach(menu => {
if (menu.children) {
menu.children.forEach(m => {
// 菜單轉(zhuǎn)成路由
let route = menuToRoute(m, menu.name);
if (route) {
newRoutes[0].children.push(route); // 添加到路由管理
}
})
}
})
// 重新添加到路由
newRoutes.forEach(route => {
router.addRoute(route)
})
}
// 菜單轉(zhuǎn)成路由
const menuToRoute = (menu, parentName) => {
let route = {
name: menu.name,
path: menu.path,
meta: {
parentName: parentName
},
children:[],
}
if (!menu.component) {
route.component = ''
} else {
route.component = () => import('@/views/' + menu.component + '.vue')
}
return route
}總結(jié)
到此這篇關(guān)于vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解的文章就介紹到這了,更多相關(guān)vue3動態(tài)路由刷新空白頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli4創(chuàng)建項目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,Vue-json-viewer是一個Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下2023-11-11

