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