快捷導(dǎo)航

vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法

更新時(shí)間：2023年11月21日 09:56:45 作者：Gao_web

作為一個(gè)前端新手,項(xiàng)目中遇到權(quán)限處理時(shí),通常會(huì)采用動(dòng)態(tài)添加路由的方法來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法的相關(guān)資料,需要的朋友可以參考下

前言

在開(kāi)發(fā)后臺(tái)管理項(xiàng)目，我們會(huì)使用vue動(dòng)態(tài)路由做權(quán)限管理，但是使用vue動(dòng)態(tài)路由時(shí)會(huì)遇到一些坑，這里總結(jié)一下，并提供解決思路

1.動(dòng)態(tài)路由刷新頁(yè)面失效問(wèn)題

問(wèn)題：刷新頁(yè)面時(shí)會(huì)把a(bǔ)ddRouter添加的動(dòng)態(tài)路由刷新掉，因此瀏覽器找不到之前添加的路由，便會(huì)進(jìn)入白屏頁(yè)面或者404頁(yè)面

處理方式：判斷是否刷新頁(yè)面如果刷新在路由守衛(wèi)中再次添加動(dòng)態(tài)路由

把添加的動(dòng)態(tài)路由存入瀏覽器緩存和vuex或pinia中如果刷新頁(yè)面vuex和pinia存的內(nèi)容將會(huì)丟失以此來(lái)判斷是否刷新頁(yè)面然后從瀏覽器緩存中拿到再重新添加

router.beforeEach((to, from, next) => {
    if(store.userRouter.length || to.path == '/' || to.path == '/index'){
           next() //如果登錄頁(yè)或首頁(yè) 或 vuex中有動(dòng)態(tài)路由數(shù)據(jù) 直接通過(guò)
    }else{
          //拿到瀏覽器緩存中動(dòng)態(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)  //添加完成后再次進(jìn)入
 
    }
})

注意使用pinia在router配置文件中訪問(wèn)不到store，建議寫(xiě)在mian.js

userRouter為自定義變量格式為數(shù)組包裹addRoute所需數(shù)組

2.動(dòng)態(tài)路由搭配404頁(yè)面使用

如果我們配置了404頁(yè)面用以上方式進(jìn)入動(dòng)態(tài)路由頁(yè)面還是會(huì)進(jìn)入404頁(yè)面我們需要將404頁(yè)面的路由也動(dòng)態(tài)追加

router.beforeEach((to, from, next) => {
    if(store.userRouter.length || to.path == '/' || to.path == '/index'){
           next() //如果登錄頁(yè)或首頁(yè) 或 vuex中有動(dòng)態(tài)路由數(shù)據(jù) 直接通過(guò)
    }else{
          //拿到瀏覽器緩存中動(dòng)態(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動(dòng)態(tài)路由
          router.addRoute({
          path: "/:catchAll(.*)",
          redirect: "/404",
           })
          next(to.path)  //添加完成后再次進(jìn)入
    }
})

附：了解動(dòng)態(tài)路由

我這里說(shuō)的動(dòng)態(tài)路由指的是，由后端提供當(dāng)前角色可以訪問(wèn)的所有路徑，前端提前寫(xiě)好路徑與組件之間的映射也就是route，然后根據(jù)后端返回的url進(jìn)行匹配，將匹配到的route加入到router里面。

后端返回的數(shù)據(jù)大概是這樣：

提前寫(xiě)好的route的path一定要和上面的url對(duì)應(yīng)：

export default {
  path: '/main/analysis/overview',
  name: 'overview',
  component: overview,
  children: []
}

動(dòng)態(tài)添加就是遍歷咱們上面提前寫(xiě)好的所有routes，看有沒(méi)有和后端返回的url一樣的，有到時(shí)候我們就先放到數(shù)組routes里，后面通過(guò)router.addRoute加入到路由里面去即可：

const routes = mapMenusToRoutes(userMenu)
      routes.forEach((route) => {
        router.addRoute('main', route)
      })

總結(jié)

到此這篇關(guān)于vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)路由刷新失效404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: