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 相关文章推荐
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
js中null与空字符串""的区别讲解
Jan 17 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 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
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Python语法快速入门指南
2015/10/12 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python 性能提升的几种方法
2016/07/15 Python
Python for循环中的陷阱详解
2018/07/13 Python
python实现汽车管理系统
2018/11/30 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python如何操作mysql
2020/08/17 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
新员工欢迎词
2014/01/12 职场文书
养殖项目策划书范文
2014/01/13 职场文书
社区党员先进事迹
2014/01/22 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
新教师教学工作总结
2015/08/12 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis