解决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-ui中自动完成实现方法
Jun 10 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Vue基础配置讲解
Nov 29 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
js数组中去除重复值的几种方法
Aug 03 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php5.3 注意事项说明
2013/07/01 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
DOM事件探秘篇
2017/02/15 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python监控文件或目录变化
2016/06/07 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python pygame实现球球大作战
2019/11/25 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
经济系大学生求职信
2013/10/01 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
大二学习计划书范文
2014/04/27 职场文书
介绍信范文大全
2015/05/07 职场文书
实践论读书笔记
2015/06/29 职场文书
九不准学习心得体会
2016/01/23 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
python数据处理之Pandas类型转换
2022/04/28 Python
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL