Vue 第一个组件,浏览器后退无法触发beforeRouteLeave的问题与解决

HTML 2017-12-22

已提issue: https://github.com/vuejs/vue-router/issues/1951

现象

加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为待监听组件)时,正常跳转其他页面可以触发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
})

存在的问题:

  1. 若访问不是访问中转组件而是直接访问待监听组件,则没有效果
  2. 增加路由后,多了白屏时间。

可能官方有什么解决方案,或者我用错了。欢迎评论~


本文由 GaHingZ 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

赏个馒头吧