解决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.query.js 取参数的两点问题分析
Aug 06 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
小程序实现左滑删除功能
Oct 30 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
wxPython实现列表增删改查功能
2019/11/19 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
领班岗位职责范文
2014/02/06 职场文书
怎样填写就业意向
2014/04/02 职场文书
电台编导求职信
2014/05/06 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
跑出一片天观后感
2015/06/08 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python