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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python文本数据处理学习笔记详解
2019/06/17 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
python开发入门——set的使用
2020/09/03 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
幼儿园安全责任书
2014/04/14 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2015年店长工作总结范文
2015/04/08 职场文书