解决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背投广告代码的完善
Apr 08 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
晶体管单管来复再生式收音机
2021/03/02 无线电
怎样辨别一杯好咖啡
2021/03/03 新手入门
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
Js 中debug方式
2010/02/07 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python避免死锁方法实例分析
2015/06/04 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python脚本调试工具安装过程
2021/01/11 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
拾金不昧表扬信范文
2014/01/11 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
接待员岗位职责范本
2015/04/15 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android