解决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 中的replace方法说明
Apr 13 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
Node.js笔记之process模块解读
May 31 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
jcrop基本参数一览
2013/07/16 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
详解Python Socket网络编程
2016/01/05 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python使用Geany编辑器配置方法
2020/02/21 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python字符串三种格式化输出
2020/09/17 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
高三体育教学反思
2014/01/29 职场文书
顶碗少年教学反思
2014/02/21 职场文书
企业文化口号
2014/06/12 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
《穷人》教学反思
2016/02/19 职场文书
导游词之山西关帝庙
2019/11/01 职场文书