天天看点

vue-router组件内的守卫 beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave 用法

几天前帮一个朋友看代码  组件内使用beforeRouteEnter  一直this 为 undefined  这朋友压根就没有仔细看文档

1.beforeRouteEnter

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
  },
           
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}
           

2. beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}
           

3. beforeRouteLeave

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
           

继续阅读