Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

vue 解决addRoutes动态添加路由后刷新失效问题

来源:中文源码网    浏览:1430 次    日期:2024-03-28 12:48:27
【下载文档:  vue 解决addRoutes动态添加路由后刷新失效问题.txt 】


vue 解决addRoutes动态添加路由后刷新失效问题
前言
某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。
应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面。 不点这个按钮,浏览器输入地址,用户会跳到404页面
github:http://github.com/Mrblackant/keepRouter/tree/master
思路
1.用户点击按钮,用addRutes动态添加路由并跳转,并把路由保存;
2.用户在新跳转的页面,刷新时利用beforeEach进行拦截判断,如果发现之前有保存路由,并且判断新页面只是刷新事件,再将之前保存的路由添加进来;
代码
1.按钮点击,保存路由并跳转
(1).在router/index.js里声明一个数组,里边是一些固定的路由,比如你的登录页面、404等等
//router/index.js
export const constantRouterMap=[
{
path: '/',
// name: 'HelloWorld',
component: HelloWorld
}
]
Vue.use(Router)
export default new Router({
routes: constantRouterMap
})
(2).按钮点击,跳转、保存路由;
注意,保存路由这一步骤,要做进要跳转到的组件里,这是为了防止在beforeEach拦截这边产生死循环
添加路由需要两点,一是path,二是component,你可以封装成方法,看着就会简洁一点,我这里就不做了
记得要用concat方法连接,固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回
//点击跳转


//跳转过去的component组件,xxx.vue


2.路由拦截beforeEach
这里拦截的时候,就判断localStorage里边有没有保存新的动态路由,如果有,就进行判断,逻辑处理,处理完之后就把保存的路由清除掉,防止进入死循环。
进入第一层判断后,需要再次判断一下是不是页面的刷新事件
import router from './router'
import { constantRouterMap } from '@/router' //router里的固定路由
router.beforeEach((to, from, next) => {
if (localStorage.getItem('new')) {
var c = JSON.parse(localStorage.getItem('new')),
lastUrl=getLastUrl(window.location.href,'/');
if (c.path==lastUrl) { //动态路由页面的刷新事件
let newRoutes = constantRouterMap.concat([{
path: c.path,
component: resolve => require(["@/components/" + c.component + ""], resolve)
}])
localStorage.removeItem('new')
router.addRoutes(newRoutes)
router.replace(c.path) //replace,保证浏览器回退的时候能直接返回到上个页面,不会叠加
}
}
next()
})
var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符
ps:一开始我还以为匹配不到路由跳转404要在拦截这里处理,后来发现根本不用,直接在注册路由的时候加上下边两段就行了:
export const constantRouterMap = [{
path: '/',
component: HelloWorld
},
{//404
path: '/404',
component: ErrPage
},
{ //重定向到404
path: '*', redirect: '/404' }
]
整体的思路大概就是这样,主要就是利用了beforeEach拦截+localStorage的数据存储,就能完成,addRoutes动态添加路由刷新不失效功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

相关内容