addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言
某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。
应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面。 不点这个按钮,浏览器输入地址,用户会跳到404页面
github:https://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方法连接,固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回
//点击跳转
点击新增 动态路由: "secondRouter"
新增动态路由
import router from 'vue-router'
import {constantRouterMap} from '@/router'
export default {
name: 'kk',
mounted(){
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
srouter(){
let newRoutes=constantRouterMap.concat([{path:'/secondRouter',
component :resolve => require(["@/components/kk"], resolve )
}])
this.$router.addRoutes(newRoutes)
this.$router.push({path:'/secondRouter'})
}
}
}
//跳转过去的component组件,xxx.vue
恭喜你,动态添加路由成功,浏览器的链接已经变化;
无论你怎么刷新我都会留在当前页面
并且点击浏览器回退键,我会跳到之前页面,不会循环
import router2 from '@/router'
import router from 'vue-router'
export default {
name: 'HelloWorld',
mounted(){
localStorage.setItem('new',JSON.stringify({'path':'/secondRouter','component':'kk'}))//保存路由
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
}
}
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动态添加路由刷新不失效功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
本文标题: vue 解决addRoutes动态添加路由后刷新失效问题
本文地址: http://www.cppcns.com/ruanjian/java/231782.html
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题相关推荐
- addroutes刷新_vue解决addRoutes多次添加路由重复的操作方法
本篇文章小编给大家分享一下vue解决addRoutes多次添加路由重复的操作方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 代码如下: impor ...
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言 使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果 比如对于网站 ...
- 使用addRoutes动态添加路由
登录是获取添加的路由,存在vuex中 login.vue import {initRoutes} from "@/router/index.js"; // 按需引入路由的动态注入方 ...
- 通过addroutes动态添加路由
说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧. 一.addroutes的使用 1.router/index.js import ...
- 动态添加路由 addRoute添加路由刷新404
文章目录 动态添加路由 案例 初步 动态添加路由-使用导航守卫 解决刷新404问题 完整代码: 动态添加路由 大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...
- activemenu怎么拼 vue_vue-element-admin登录逻辑,以及动态添加路由,显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
- vue 动态添加路由
为什么80%的码农都做不了架构师?>>> 最近在研究权限的相关东西,自然动态加载路由信息少不了.接下来我就来专门记录下我研究的东西. 1.首先后端代码返回一个对象,用java写 ...
- Vue2.x动态添加路由实现
适用于:Vue2.x VueRouter3.x 动态添加路由一般应用于受权限控制的路由菜单,由后端返回可以判断该角色具有的权限,前端处理出一份符合权限的路由表,使用addRoutes方法动态添加权限路 ...
最新文章
- html中,纯数字或纯英文的一串字符超出父容器不会折行显示,如何解决?
- SAP Spartacus PageMetaService 的单元测试
- Overview of the New C++:C++0x
- 智能一代云平台(九):EclipseLink返回Object转为实体的分析
- java启动RabbitMQ消息报异常解决办法
- 转:JS中生成和解析JSON
- Nginx配置与安装及发布项目
- 乌班图/Ubuntu 21.10 安装nvidia 显卡驱动
- mysql 空串 0_casewhen遇到空串转成0
- C语言LMS双麦克风消噪算法,一种双麦克风语音降噪方法与流程
- 【渝粤教育】广东开放大学 插画与漫画 形成性考核 (27)
- kinetis FTM 分析笔记
- 个人书籍收藏及问题研究(!!! , 读书计划)
- Could not resolve hostname github: Name or service
- Android studio 导出安卓APP软件方法
- Android开发-在Android应用里接入AdMob广告进行变现的实现
- java读取配置文件详解
- 【论文阅读】【综述】从Optical Flow到Scene Flow
- 作为 Gopher, 你知道 Go 的注释即文档应该怎么写吗
- 微信小游戏wx.getFileSystemManager文件写入
热门文章
- 8月组队学习机器学习理论
- LoveLive!出了一篇AI论文:生成模型自动写曲谱
- ICLR 2022:AI如何识别“没见过的东西”?
- 十年学术生涯新开端:港中文助理教授周博磊宣布加入UCLA
- CVPR2021 | 视觉 Transformer 的可视化
- 算法战争:美国国家AI安全委员会要建立AI大学,「数字服务学院」为政府培养AI人才...
- Python 为什么要保留显式的 self ?
- 2019天猫双11成交额达2684亿,盘点今年双11有哪些亮点!
- Linux 之Cut命令详解
- MyEclipse的Java Web项目配置环境搭建-如何安装tomact