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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
简单使用webpack打包文件的实现
Oct 29 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效率,提高php性能的一些方法
2011/03/24 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
Express.JS使用详解
2014/07/17 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
import的本质解析
2017/10/30 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Python logging设置和logger解析
2019/08/28 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Django如何使用redis作为缓存
2020/05/21 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
期末自我鉴定
2014/02/02 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers