解决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的初始化与对象构建之浅析
Apr 12 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
javascript基本算法汇总
Mar 09 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
vue实现拖拽交换位置
Apr 07 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中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript时间函数大全
2014/06/30 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
django 创建过滤器的实例详解
2017/08/14 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
详解python读取和输出到txt
2019/03/29 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python读写Excel表格的方法
2021/03/02 Python
小学老师寄语大全
2014/04/04 职场文书
教师考察材料范文
2014/06/03 职场文书
班级体育活动总结
2014/07/05 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
元宵节寄语大全
2015/02/27 职场文书
公司行政助理岗位职责
2015/04/11 职场文书