vue動態(tài)路由刷新失效以及404頁面處理辦法
前言
在開發(fā)后臺管理項目，我們會使用vue動態(tài)路由做權限管理，但是使用vue動態(tài)路由時會遇到一些坑，這里總結一下，并提供解決思路
1.動態(tài)路由刷新頁面失效問題
問題：刷新頁面時會把addRouter添加的動態(tài)路由刷新掉，因此瀏覽器找不到之前添加的路由，便會進入白屏頁面或者404頁面
處理方式：判斷是否刷新頁面 如果刷新在路由守衛(wèi)中再次添加動態(tài)路由
把添加的動態(tài)路由存入瀏覽器緩存和vuex或pinia中 如果刷新頁面vuex和pinia存的內(nèi)容將會丟失以此來判斷是否刷新頁面 然后從瀏覽器緩存中拿到再重新添加
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 //重新復制給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)追加
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 //重新復制給store
data.forEach(e=>{ //循環(huán)添加路由
router.addRoute(e)
})
//添加404動態(tài)路由
router.addRoute({
path: "/:catchAll(.*)",
redirect: "/404",
})
next(to.path) //添加完成后再次進入
}
})附：了解動態(tài)路由
我這里說的動態(tài)路由指的是，由后端提供當前角色可以訪問的所有路徑，前端提前寫好路徑與組件之間的映射也就是route，然后根據(jù)后端返回的url進行匹配，將匹配到的route加入到router里面。
后端返回的數(shù)據(jù)大概是這樣：
提前寫好的route的path一定要和上面的url對應：
export default {
path: '/main/analysis/overview',
name: 'overview',
component: overview,
children: []
}
動態(tài)添加就是遍歷咱們上面提前寫好的所有routes，看有沒有和后端返回的url一樣的，有到時候我們就先放到數(shù)組routes里，后面通過router.addRoute加入到路由里面去即可：
const routes = mapMenusToRoutes(userMenu)
routes.forEach((route) => {
router.addRoute('main', route)
})總結
到此這篇關于vue動態(tài)路由刷新失效以及404頁面處理辦法的文章就介紹到這了,更多相關vue動態(tài)路由刷新失效404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中elementUI表單循環(huán)驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
當針對不同客戶需要提供不同的圖標時,頁面其他圖標好替換,但是網(wǎng)頁圖標就不太一樣了,下面這篇文章主要給大家介紹了關于vue中修改瀏覽器圖標和名字的幾種方式,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue的異步更新實現(xiàn)原理，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了關于vue雙向綁定帶來的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue滾動頁面到指定位置的實現(xiàn)及避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
Electron相當于一個瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關于如何使用electron將vue項目打包成exe的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue替代marquee標簽超出寬度文字橫向滾動效果,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue中的config目錄下index.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03