vue 解決addRoutes動態新增路由後重新整理失效問題(跳轉“404”頁面)
阿新 • • 發佈:2018-12-21
這篇文章主要介紹了vue 解決addRoutes動態新增路由後重新整理失效問題,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
前言
某些場景下我們需要利用addRoutes動態新增路由,但是重新整理後就會失效,前段時間專案裡剛好遇到了這個應用場景,所以就花時間研究了一下,做下分享跟記錄,說的不對的地方,請大家指正。
應用場景:使用者a登入進系統,使用者挑選店鋪後跳轉到店鋪詳情首頁,進入到動態新增的路由頁面後,如果這個重新整理頁面或者更改位址列,你會發現使用者會跳到404頁面。(因為我在路由配置全域性匹配404路由如下)
{path: '*',redirect: '/404',hidden: true}, {path: '/404',name: "404",component: () => import('@/views/errorPage/404'),hidden: true}, {path: '/401',name: "401",component: () => import('@/views/errorPage/401'), hidden: true},
根據路由配置,如果路由沒有找到強匹配的地址,就會選擇重定向“/404”
問題展示
思路
1.使用者點選按鈕,用addRutes動態新增路由並跳轉,並把路由儲存;
2.使用者在新跳轉的頁面,重新整理時暫存重新整理的頁面,利用beforeEach進行攔截判斷,如果發現之前有儲存路由路徑,並且判斷新頁面只是重新整理事件,再將之前儲存的路由新增進來;
實現
在App.vue中新增一些js程式碼儲存重新整理時的路徑
//vue的呼叫鉤子函式 created () { this.routeUpdate(this.$route); }, //監聽路由更變 watch: { '$route': 'routeUpdate' }, methods: { routeUpdate (to) { if (to.name) { this.menuShow = to.meta.menu === undefined || to.meta.menu this.localLoginUser() } this.loadShopInfo() this.loadRoutesInfo() }, loadRoutesInfo: _.once(function () { //在頁面載入時讀取sessionStorage裡的狀態資訊 try { sessionStorage.getItem("routesInfo") && this.$store.commit("setRouterArray", JSON.parse(sessionStorage.getItem("routesInfo"))); // sessionStorage.setItem("routesInfo", "") } catch (e) { console.log(e) } //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡 window.addEventListener("beforeunload", () => { sessionStorage.setItem("pathName", window.location.pathname)//重點:暫存頁面重新整理的地址 sessionStorage.setItem("routesInfo", JSON.stringify(this.$store.getters.getRouterArray)) }) }), }
瀏覽器可以檢視到
在beforeEach的方法中攔截
/** * @param {Object} to 即將要進入的目標 路由物件 * @param {Object} from 當前導航正要離開的路由 * @param {Function} next 一定要呼叫該方法來 resolve 這個鉤子。 */ router.beforeEach((to, from, next) => { if (from.name == null) { //from.name為null的時候,證明是頁面重新整理 console.log("to -> ", to) console.log("from -> ", from) //路由資訊放到sessionStorage中 let routerTable = JSON.parse(sessionStorage.getItem("routesInfo")) //組合成完整路由物件 routerUtil.combination(routerTable) //遞迴組合成巢狀路由樹 routerTable = routerUtil.routerTree(routerTable, 0) //動態新增路由 share.addRoutes(routerTable) //把生成的路由放到vuex中 store.commit('setRouterTable', routerTable) if (to.path != "/404" && to.path != "/401") {//如果跳轉的目標地址不是 404 401 則直接跳轉 next() } else { let pathName = sessionStorage.getItem("pathName") if (pathName == to.path) {//判斷的目標地址是否已經更改,如更改後則直接跳轉 next() } else { //這時的目標地址可能為 “/” 可以檢視上面的照片中 to物件與from物件變化 next(pathName)//當沒有更改目標地址,則需要更改 } } } else { next() } })
整體的思路大概就是這樣,主要就是利用了beforeEach攔截+sessionStorage的資料儲存,就能完成,addRoutes動態新增路由重新整理不失效功能。
喜歡我的朋友可以在微信公眾號上關注我: