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