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 相关文章推荐
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
video.js添加自定义组件的方法
Dec 09 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 解析xml 的四种方法详细介绍
2016/10/26 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Python中join和split用法实例
2015/04/14 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Python Selenium库的基本使用教程
2021/01/04 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
法人授权委托书范本
2014/09/17 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
Python加密与解密模块hashlib与hmac
2022/06/05 Python