这篇文章主要介绍了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()