這篇文章主要介紹了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動態新增路由重新整理不失效功能。

喜歡我的朋友可以在微信公眾號上關注我：