解决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之可拖动的iframe效果代码
Aug 01 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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调用Webservice实例代码
2011/07/29 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
javascript demo 基本技巧
2009/12/18 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
python中Genarator函数用法分析
2015/04/08 Python
python中map()函数的使用方法示例
2017/09/29 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
GWT都有什么特性
2016/12/02 面试题
实习自我鉴定范文
2013/10/30 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
清洁工表扬信
2014/01/08 职场文书
自我鉴定书面格式
2014/01/13 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
四年级评语大全
2014/04/21 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
污水处理保证书
2015/05/09 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
详解Go与PHP的语法对比
2021/05/29 PHP
python中24小时制转换为12小时制的方法
2021/06/18 Python