解决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 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
js实现新年倒计时效果
Dec 10 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
JavaScript实现随机点名程序
Mar 25 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
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
Use Word to Search for Files
2007/06/15 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python函数装饰器实现方法详解
2018/12/22 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python生成器用法实例详解
2019/11/22 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
新闻专业应届生求职信
2013/10/31 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
企业军训感想
2014/02/07 职场文书
物业管理工作方案
2014/05/10 职场文书
工商管理专业自荐信
2014/06/03 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python