vue 组件内路由守卫的定义

在 Vue 组件中，可以使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 三个钩子函数来定义路由守卫。

`beforeRouteEnter` 钩子函数在路由进入组件前触发，此时组件实例还没有被创建，因此无法通过 this 访问组件实例。但可以通过传入一个回调函数，在回调函数中访问组件实例或延迟渲染组件。

beforeRouteEnter(to, from, next) {
  // 通过回调函数访问组件实例
  next(vm => {
    // 访问组件实例
    console.log(vm)
  })
}

`beforeRouteUpdate` 钩子函数在组件复用时触发，例如从 `/user/1` 切换到 `/user/2`，此时复用了同一个组件，因此不会触发 `beforeRouteEnter` 钩子函数。此时可以通过比较 `$route` 对象的参数来处理组件的更新。

beforeRouteUpdate(to, from, next) {
  // 比较参数，处理组件更新
  if (to.params.id !== from.params.id) {
    // 处理组件更新
  }
  next()
}

`beforeRouteLeave` 钩子函数在路由离开组件时触发。可以在该函数中进行用户确认操作，例如弹出确认对话框。

beforeRouteLeave(to, from, next) {
  // 弹出确认对话框
  if (confirm('确定要离开该页面吗？')) {
    next()
  } else {
    next(false)
  }
}

需要注意的是，路由守卫是全局的，也可以在路由配置中定义全局守卫。在组件内定义的路由守卫只会在该组件的路由中生效。