解决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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
通过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
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP 数组入门教程小结
2009/05/20 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHPMailer发送邮件
2016/12/28 PHP
php批量删除操作代码分享
2017/02/26 PHP
php DES加密算法实例分析
2019/09/18 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python断言assert的用法代码解析
2018/02/03 Python
python编程嵌套函数实例代码
2018/02/11 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
法国在线药房:DoctiPharma
2020/10/21 全球购物
四风对照检查剖析材料
2014/10/07 职场文书
小学校本教研总结
2015/08/13 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python