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)
  }
}