解决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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
js操作iframe父子窗体示例
May 22 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
JavaScript实现网页计算器功能
Oct 29 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分页类的代码
2011/05/18 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
python合并文本文件示例
2014/02/07 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python的UTC时间转换讲解
2019/02/26 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
jupyter 添加不同内核的操作
2021/02/06 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
优秀学生事迹材料
2014/02/08 职场文书
会议主持词
2014/03/17 职场文书
继承公证书格式
2015/01/26 职场文书
《1942》观后感
2015/06/08 职场文书
人生感悟经典句子
2019/08/20 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Redis读写分离搭建的完整步骤
2021/09/14 Redis