vue-router 组件内守卫beforeRouteEnter触发了而beforeRouteLeave没有触发

Question

我在.vue文件中：

export default {
  name: 'SomeName',
  beforeRouteLeave(to, from, next) {
    console.log(' beforeRouteLeave !', this)
  },
  beforeRouteEnter(to, from, next) {
    console.log(' beforeRouteEnter !')
  }
}

但是在进入路由的时候守卫beforeRouteEnter触发了而beforeRouteLeave没有触发，不知道是不是我的使用姿势不对呢

环境：vue: 2.5.16,Chrome65

Answer 1

因为你进入后没有再离开(next());
当然也就没有再执行beforeRouteLeave的机会了

Answer 2

经过我的实验之后，发现是我的错...

在路由守卫中需要调用next()才会进入路由，否则beforeRouteEnter中如果没有next(),虽然会执行守卫的内容，但是不能进入路由，正确的写法是

export default {
  name: 'SomeName',
  beforeRouteLeave(to, from, next) {
    console.log(' beforeRouteLeave !', this)
    const answer = window.confirm('确认离开？')
    answer ? next() : next(false)
  },
  beforeRouteEnter(to, from, next) {
    console.log(' beforeRouteEnter !')
    next()
  }
}