解决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入门教程(8) Location地址对象
Jan 31 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
Node.js的包详细介绍
Jan 14 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
通过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 HTML代码串 截取实现代码
2009/06/29 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python实现的简单模板引擎功能示例
2017/09/02 Python
python Opencv将图片转为字符画
2021/02/19 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python dumps和loads区别详解
2020/02/04 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python