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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
VFP与其他应用程序的集成
2006/10/09 PHP
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
重新认识php array_merge函数
2014/08/31 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
jquery实现图片左右切换的方法
2015/05/07 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
Python实现端口复用实例代码
2014/07/03 Python
Python常用内置函数总结
2015/02/08 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
对于Python中RawString的理解介绍
2016/07/07 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python基于http下载视频或音频
2018/06/20 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
师范应届生教师求职信
2013/11/05 职场文书
小学生元旦感言
2014/02/26 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
检讨书怎么写
2015/01/23 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技