这篇文章主要介绍了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动态添加路由刷新不失效功能。

喜欢我的朋友可以在微信公众号上关注我：

vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)

前言

问题展示

思路

实现

猜你喜欢