vue動態(tài)路由刷新失效以及404頁面處理辦法
前言
在開發(fā)后臺管理項目，我們會使用vue動態(tài)路由做權限管理，但是使用vue動態(tài)路由時會遇到一些坑，這里總結(jié)一下，并提供解決思路
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)
})總結(jié)
到此這篇關于vue動態(tài)路由刷新失效以及404頁面處理辦法的文章就介紹到這了,更多相關vue動態(tài)路由刷新失效404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue實現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實現(xiàn)圖片加載完成前的loading組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue實現(xiàn)table上下移動功能,結(jié)合實例形式分析了vue.js針對table表格元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了前端token中4個存儲位置的優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了JavaScript的MVVM庫Vue.js入門學習筆記,Vue.js是一個新興的js庫,主要用于實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下2016-05-05
Vue監(jiān)聽頁面變化的實現(xiàn)方法小結(jié)
在Vue.js應用開發(fā)過程中,監(jiān)聽頁面變化是一個非常常見的需求,無論是為了響應用戶交互、優(yōu)化性能,還是實現(xiàn)復雜的業(yè)務邏輯,監(jiān)聽頁面變化的能力都是不可或缺的,本文將詳細介紹如何在Vue項目中實現(xiàn)頁面變化監(jiān)聽,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-03-03
vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)代碼
這篇文章主要給大家介紹了關于vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)的相關資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項進行相應的操作,需要的朋友可以參考下2023-08-08
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue echarts封裝的實現(xiàn)，Echarts，它是一個與框架無關的JS圖表庫，但是它基于JS，這樣很多框架都能使用它2023-01-01
最近遇到這樣的需求點擊某一個節(jié)點，彈窗，直接定位到點擊的節(jié)點，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)砹藇ue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11