解决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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python itertools模块详解
2015/05/09 Python
python selenium firefox使用详解
2019/02/26 Python
python3 反射的四种基本方法解析
2019/08/26 Python
美的官方商城:Midea
2016/09/14 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
无财产离婚协议书范本
2014/10/28 职场文书
武夷山导游词
2015/02/03 职场文书
美丽的大脚观后感
2015/06/03 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server