vue中beforeRouteLeave实现页面回退不刷新的示例代码


Posted in Javascript onNovember 01, 2019

路由切换返回前一个路由时实现页面不刷新功能,首先想到的是keep-alive,但是页面不属于父子级关系,所以决定用beforeRouteLeave,下面贴代码

beforeRouteLeave(to, from, next){
  if(to.name !== 'page2'){
  
    //判断是从哪个路由过来的,如果不是page2过来的需要做什么操作在这里实现
    //如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可
  }
  next();
 }

beforeRouteLeave后面的参数to是关于上个页面的信息,to.name就是上个路由名称。

这里有的人beforeRouteLeave方法无法触发可能是因为在page2页面中路由跳转写了router.go(-1) ,这里必须写具体跳转的路由名称

this.$router.push({name:'xxx'});

PS:

最近才做了一个功能一个路由下面有两个tab切换的页面,互相切换的时候需要保持之前选的参数,其实tab本身是有这个功能的,但是这个需求切换的时候是需要像后台发送请求,并且路由改变再切回来参数是要初始化的,所以想到了用beforerouteleave

vue中beforeRouteLeave实现页面回退不刷新的示例代码

vue中beforeRouteLeave实现页面回退不刷新的示例代码

beforerouteleave之前是一直听闻这个东西并没有用过,再网上看了,按照他们的用法并没有效果

然后就自己试了一下结果成功了

看我的目录结构

vue中beforeRouteLeave实现页面回退不刷新的示例代码

下面的migrationPeople和personalMigration分别是tab切换里面的两个内容

index里面是写tab切换的

我们只需要把beforeRouteLeave想写vue生命周期一样的写法写进来就好了,至于参数to,from是什么就给路由守卫是一样的,感兴趣的可以自己打印看一下

beforeRouteLeave(to,from,next){
   if(sessionStorage.getItem('migrationPeopleDate')){
    sessionStorage.removeItem('migrationPeopleDate')
   }
   if(sessionStorage.getItem('personalMigrationMan')){
    sessionStorage.removeItem('personalMigrationMan')
   }
   next()
  },

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

Javascript 相关文章推荐
红米手机抢购的js代码
Mar 10 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
浅谈js中的this问题
Aug 31 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
You might like
swoole和websocket简单聊天室开发
2017/11/18 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js命名空间写法示例
2015/12/18 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python 图像平移和旋转的实例
2019/01/10 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python程序如何进行保存
2020/07/03 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
什么是URL
2015/12/13 面试题
庆元旦广播稿
2014/02/10 职场文书
2014年林业工作总结
2014/12/05 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
借钱欠条怎么写
2015/07/03 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
MYSQL常用函数介绍
2022/05/05 MySQL
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript