解决Vue 浏览器后退无法触发beforeRouteLeave的问题

这篇文章主要为大家详细介绍了解决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的问题，希望对大家有所帮助！

本文来自：http://www.q1010.com/184/4095-0.html

注：关于解决Vue 浏览器后退无法触发beforeRouteLeave的问题的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js