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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
switchery按钮的使用方法
Dec 18 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
vue-test-utils初使用详解
May 23 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php GeoIP的使用教程
2011/03/09 PHP
php去除HTML标签实例
2013/11/06 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php socket通信简单实现
2016/11/18 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
项目实践之javascript技巧
2007/12/06 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
nodejs教程之入门
2014/11/21 NodeJs
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python多重继承新算法C3介绍
2014/09/28 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
C语言基础笔试题
2013/04/27 面试题
研发工程师的岗位职责
2013/11/18 职场文书
新店开张活动方案
2014/08/24 职场文书
周年庆典答谢词
2015/01/20 职场文书
中标通知书格式
2015/04/17 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书