解决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的简单图片切换效果
Jan 06 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
纯JS实现五子棋游戏
May 28 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
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP7 其他修改
2021/03/09 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
如何在python中实现线性回归
2020/08/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
《秋游》教学反思
2014/04/24 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python