beforeRouteEnter(to, from, next) {
  // 不能訪問 this
  next(vm => {
    // 通過 vm 訪問組件實(shí)例
  })
}

export default {
  name: 'UserProfile',
  beforeRouteEnter(to, from, next) {
    // 驗(yàn)證用戶權(quán)限
    if (!localStorage.getItem('isAuthenticated')) {
      next('/login') // 重定向到登錄頁(yè)
    } else {
      next() // 允許進(jìn)入
    }
  }
}

beforeRouteUpdate(to, from, next) {
  // 可以訪問 this
  this.userData = null
  this.fetchUserData(to.params.id)
  next()
}

export default {
  name: 'UserProfile',
  data() {
    return {
      user: null
    }
  },
  methods: {
    fetchUser(id) {
      // 獲取用戶數(shù)據(jù)
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 當(dāng)路由參數(shù)變化時(shí)重新獲取數(shù)據(jù)
    if (to.params.id !== from.params.id) {
      this.user = null
      this.fetchUser(to.params.id)
    }
    next()
  }
}

beforeRouteLeave(to, from, next) {
  // 可以訪問 this
  if (this.unsavedChanges) {
    if (confirm('您有未保存的更改，確定要離開嗎？')) {
      next()
    } else {
      next(false) // 取消導(dǎo)航
    }
  } else {
    next()
  }
}

export default {
  name: 'EditPost',
  data() {
    return {
      unsavedChanges: false
    }
  },
  watch: {
    formData: {
      deep: true,
      handler() {
        this.unsavedChanges = true
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.unsavedChanges) {
      const answer = window.confirm(
        '您有未保存的更改，確定要離開嗎？'
      )
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

export default {
  name: 'AdminDashboard',
  beforeRouteEnter(to, from, next) {
    // 檢查用戶權(quán)限
    api.checkAdminPermission().then(hasPermission => {
      if (hasPermission) {
        next()
      } else {
        next('/forbidden') // 無權(quán)限則跳轉(zhuǎn)到禁止訪問頁(yè)面
      }
    }).catch(() => {
      next('/login') // 出錯(cuò)則跳轉(zhuǎn)到登錄頁(yè)
    })
  }
}

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: null,
      loading: false
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在進(jìn)入路由前獲取數(shù)據(jù)
    api.getProduct(to.params.id).then(product => {
      next(vm => {
        vm.product = product // 數(shù)據(jù)預(yù)加載
      })
    }).catch(() => {
      next('/not-found') // 產(chǎn)品不存在則跳轉(zhuǎn)到404頁(yè)面
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 路由參數(shù)變化時(shí)重新獲取數(shù)據(jù)
    this.loading = true
    api.getProduct(to.params.id).then(product => {
      this.product = product
      this.loading = false
      next()
    }).catch(() => {
      next(false) // 保持當(dāng)前視圖
    })
  }
}

export default {
  name: 'OrderForm',
  data() {
    return {
      form: {
        items: [],
        address: ''
      },
      isDirty: false
    }
  },
  watch: {
    form: {
      deep: true,
      handler(newVal, oldVal) {
        if (!this._inited) {
          this._inited = true
          return
        }
        this.isDirty = true
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      this.$confirm('您有未保存的更改，確定要離開嗎？', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next()
      }).catch(() => {
        next(false)
      })
    } else {
      next()
    }
  }
}

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 通過 vm 訪問組件實(shí)例
    vm.doSomething()
  })
}

beforeRouteUpdate(to, from, next) {
  if (to.params.id !== from.params.id) {
    this.fetchData(to.params.id)
  }
  next()
}

beforeRouteEnter(to, from, next) {
  someAsyncOperation().then(() => {
    next()
  }).catch(error => {
    next(false) // 或跳轉(zhuǎn)到錯(cuò)誤頁(yè)面
  })
}