在開發(fā)后臺管理項目，我們會使用vue動態(tài)路由做權(quán)限管理，但是使用vue動態(tài)路由時會遇到一些坑，這里總結(jié)一下，并提供解決思路
1.動態(tài)路由刷新頁面失效問題
問題：刷新頁面時會把addRouter添加的動態(tài)路由刷新掉，因此瀏覽器找不到之前添加的路由，便會進入白屏頁面或者404頁面
處理方式：判斷是否刷新頁面 ?如果刷新在路由守衛(wèi)中再次添加動態(tài)路由
把添加的動態(tài)路由存入瀏覽器緩存和vuex或pinia中 如果刷新頁面vuex和pinia存的內(nèi)容將會丟失以此來判斷是否刷新頁面 然后從瀏覽器緩存中拿到再重新添加文章來源：http://www.zghlxwxcb.cn/news/detail-521817.html
router.beforeEach((to, from, next) => {
if(store.userRouter.length || to.path == '/' || to.path == '/index'){
next() //如果登錄頁或首頁 或 vuex中有動態(tài)路由數(shù)據(jù) 直接通過
}else{
//拿到瀏覽器緩存中動態(tài)路由的數(shù)據(jù) 重新添加
const data = JSON.parse( localStorage.getItem('userRouter'))
store.userRouter = data //重新復(fù)制給store
data.forEach(e=>{ //循環(huán)添加路由
router.addRoute(e)
})
next(to.path) //添加完成后再次進入
}
})注意使用pinia在router配置文件中訪問不到store，建議寫在mian.js
userRouter為自定義變量? 格式為數(shù)組包裹addRoute所需數(shù)組
2.動態(tài)路由搭配404頁面使用
如果我們配置了404頁面 用以上方式進入動態(tài)路由頁面還是會進入404頁面 我們需要將404頁面的路由也動態(tài)追加文章來源地址http://www.zghlxwxcb.cn/news/detail-521817.html
router.beforeEach((to, from, next) => {
if(store.userRouter.length || to.path == '/' || to.path == '/index'){
next() //如果登錄頁或首頁 或 vuex中有動態(tài)路由數(shù)據(jù) 直接通過
}else{
//拿到瀏覽器緩存中動態(tài)路由的數(shù)據(jù) 重新添加
const data = JSON.parse( localStorage.getItem('userRouter'))
store.userRouter = data //重新復(fù)制給store
data.forEach(e=>{ //循環(huán)添加路由
router.addRoute(e)
})
//添加404動態(tài)路由
router.addRoute({
path: "/:catchAll(.*)",
redirect: "/404",
})
next(to.path) //添加完成后再次進入
}
})到了這里，關(guān)于vue 動態(tài)路由刷新失效及404頁面處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
