解决Vue 浏览器后退无法触发beforeRouteLeave的问题


Posted in Javascript onDecember 24, 2017

现象

加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发beforeRouteLeave。 但是 按浏览器的后退按钮监听不到该事件。

解决方案

目前采用比较土且不实用的解决方案。加一层组件,再router.push到 待监听组件 ,使得 待监听组件 非第一个组件,可以正常监听beforeRouteLeave事件。

注意点:

由于打乱了原来的路由。需要在main.js中添加全局的路由监听

router.beforeEach((to, from, next) => {
 if (to is '用于跳转的组件' && from is '待监听组件') {
  router.go(-1) 
  next(false)
 } else {
  next()
 }
 // 这样当从一个普通页面A进入待监听组件时,在待监听组件中按返回键时能正常进入A
})

总结

以上所述是小编给大家介绍的解决Vue 浏览器后退无法触发beforeRouteLeave的问题,希望对大家有所帮助!

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
使用express来代理服务的方法
Jun 21 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 #Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 #Javascript
vue项目常用组件和框架结构介绍
Dec 24 #Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 #Javascript
JS生成随机打乱数组的方法示例
Dec 23 #Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 #Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 #Javascript
You might like
php中Smarty模板初体验
2011/08/08 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
xml转json的js代码
2012/08/28 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
Linux文件系统类型
2012/02/15 面试题
房产继承公证书
2014/04/09 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
党支部审查意见
2015/06/02 职场文书
秋季运动会加油词
2015/07/18 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis