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 相关文章推荐
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JavaScript实现星级评价效果
May 17 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
JS重学系列之聊聊new操作符
2019/03/04 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python实现批量改文件名称的方法
2015/05/25 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python实现智能语音天气预报
2019/12/02 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python定义类的简单用法
2020/07/24 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
安全责任书范文
2014/03/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫