vue全家桶进阶之路38：Vue3 组件内部路由守卫

在 Vue Router 中，可以为路由和路由组件注册全局的路由守卫，也可以在组件内部注册路由守卫。

组件内部的路由守卫有以下几种：

beforeRouteEnter：在路由进入组件前被调用，但是在组件实例化之前被调用，因此在该守卫中无法访问组件实例的 this。
beforeRouteUpdate：在当前路由改变，但是仍然在该组件中时被调用，即在当前组件的 beforeRouteLeave 守卫执行完毕之后，在同一组件中导航时调用。
beforeRouteLeave：在路由离开组件时被调用，可以在该守卫中确认是否允许离开该组件。

组件内部的路由守卫的注册方法与全局路由守卫相同，可以通过 Vue Router 实例的 beforeEach、beforeResolve、afterEach 方法来注册路由守卫，也可以通过在组件选项中添加 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 属性来注册路由守卫。

下面是一个示例代码：

<template>

  <div>

    <h1>{{ title }}</h1>

    <p>{{ message }}</p>

  </div>

</template>

<script>

import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({

  setup() {

    const title = ref('Component with Route Guard')

    const state = reactive({

      message: 'This component has route guards.'

    })

    const beforeRouteEnter = (to, from, next) => {

      console.log('beforeRouteEnter')

      next(vm => {

        console.log('beforeRouteEnter: next callback')

      })

    }

    const beforeRouteUpdate = (to, from, next) => {

      console.log('beforeRouteUpdate')

      console.log(this)

      next()

    }

    return {

      title,

      message: state.message,

      beforeRouteEnter,

      beforeRouteUpdate

    }

  }

})

</script>

在上面的示例中，setup() 函数被用于创建响应式数据，并且定义了 beforeRouteEnter 和 beforeRouteUpdate 两个路由守卫。其中，title 使用了 ref 来创建一个响应式数据，而 state 使用了 reactive 来创建一个响应式对象。同时，beforeRouteEnter 和 beforeRouteUpdate 被定义为普通函数，并作为 setup() 函数的返回值暴露出来，以供组件外部使用。