vue监听浏览器原生返回按钮,进行路由转跳操作


Posted in Javascript onSeptember 09, 2020

今天测试给我报了个bug说点击浏览器返回页数据显示的不对,我查了半天原因:需要监听浏览器的回退按钮,并阻止其默认事件。

具体操作方法如下:

1、挂载完成后,判断浏览器是否支持popstate

mounted(){
   if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', this.cancel, false);
 }
 },

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

destroyed(){
 window.removeEventListener('popstate', this.cancel, false);
 }

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

cancel: function() {
   if(this.orderId){
     this.$router.push({
      name:"orderList",
      params: {id:this.orderId},
        });
   }else{
   this.$router.go(-1);
   }
  },

补充知识:vue-router组件内导航守卫判断返回按钮

组件内导航守卫会出现无法拦截$router.go(-1)或者物理返回按钮,在拦截函数外包裹setTimeout即可。具体原因还未发现。

setTimeout(() => {
  this.$confirm('编辑的页面布局尚未保存,确定离开?', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   next()
   return
  }).catch(() => {
   this.$message({
    type: 'info',
    message: '已取消'
   })
   next(false)
   return
  })
 }, 500)

以上这篇vue监听浏览器原生返回按钮,进行路由转跳操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 #Javascript
关于vue的列表图片选中打钩操作
Sep 09 #Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 #Javascript
js实现简单抽奖功能
Nov 24 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
五年后的职业生涯规划
2014/03/04 职场文书
售房协议书范本2014
2014/10/23 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Mysql忘记密码解决方法
2022/02/12 MySQL
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫