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() 函数的返回值暴露出来，以供组件外部使用。