解决Vue 浏览器后退无法触发beforeRouteLeave的问题
更新时间：2017年12月24日 09:41:57 投稿：mrr
这篇文章主要介绍了解决Vue 浏览器后退无法触发beforeRouteLeave的问题,需要的朋友可以参考下
现象
加载第一个组件（这里的第一个意思是浏览器历史记录的第一个，后文称为 待监听组件 ）时，正常跳转其他页面可以触发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的问题，希望对大家有所帮助！
相关文章
本文主要介绍了Vue实现组件间通信的几种方式，不同的场景使用不同的方式，基本满足所有开发场景中的通信需求，感兴趣的可以了解一下2021-10-10
这篇文章主要介绍了基于vue实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue使用json-server进行后端数据模拟功能,非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
使用vue-router与v-if实现tab切换遇到的问题及解决方法
这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下2018-09-09
雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下2024-06-06
ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库,下面这篇文章主要给大家介绍了关于vue2项目使用exceljs多表头导出功能的相关资料,需要的朋友可以参考下2024-05-05
这篇文章主要为大家介绍了vue发送验证码计时器防止刷新实现详解，<BR>有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了Vue3导航栏组件封装的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue+ElementUI技巧之自定义表单项label的文字提示方法
这篇文章主要给大家介绍了关于Vue+ElementUI技巧之自定义表单项label文字提示的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-02-02
最新评论