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


Posted in Javascript onJuly 02, 2018

前言

某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正。

应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面。 不点这个按钮,浏览器输入地址,用户会跳到404页面

github:https://github.com/Mrblackant/keepRouter/tree/master

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

思路

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方法连接,固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回

//点击跳转
<template>
 <div>
  点击新增 动态路由: "secondRouter"
  <br/>
  <el-button @click="srouter" type="primary">新增动态路由</el-button>

 </div>
</template>

<script>
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'})
  }
 }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
 <div class="secondRoute">
  恭喜你,动态添加路由成功,浏览器的链接已经变化;

  <h3>无论你怎么刷新我都会留在当前页面</h3>
  <h3>并且点击浏览器回退键,我会跳到之前页面,不会循环</h3>

 </div>
</template>

<script>
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:{
 }
}
</script>

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动态添加路由刷新不失效功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
D3.js实现拓扑图的示例代码
Jun 30 #Javascript
详解angular如何调用HTML字符串的方法
Jun 30 #Javascript
You might like
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python实现分段线性插值
2018/12/17 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
党支部先进事迹材料
2014/12/24 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs