版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31803503/article/details/85160073
这篇文章主要介绍了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动态添加路由刷新不失效功能。
喜欢我的朋友可以在微信公众号上关注我: