导航守卫
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。 - 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
当 beforeEach（或任何导航守卫）返回 false 时，Vue Router 会立即中断当前导航，并让浏览器的 URL 回到上一个有效的地址（也就是 from 路由）。
全局前置守卫 beforeEach
你可以使用 router.beforeEach 注册一个全局前置守卫：
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})每个守卫方法接收两个参数：
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。- 一个路由地址: 通过一个路由地址重定向到一个不同的地址，如同调用
router.push()，且可以传入诸如replace: true或name: 'home'之类的选项。它会中断当前的导航，同时用相同的from创建一个新导航。
router.beforeEach(async (to, from) => {
if (
// 检查用户是否已登录
!isAuthenticated &&
// ❗️ 避免无限重定向
to.name !== 'Login'
) {
// 将用户重定向到登录页面
return { name: 'Login' }
}
})如果遇到了意料之外的情况，可能会抛出一个 Error。这会取消导航并且调用 router.onError() 注册过的回调。
如果什么都没有，undefined 或返回 true，则导航是有效的，并调用下一个导航守卫
next参数 已废弃
- 历史背景
在 Vue Router v3（Vue 2 时代） 中，导航守卫的写法通常是这样的：
router.beforeEach((to, from, next) => {
if (!isAuthenticated) next('/login')
else next()
})这里的第三个参数 next 是一个函数，必须手动调用来放行或重定向。
但是在 Vue Router v4（Vue 3） 中，官方推荐的写法已经改成了：
router.beforeEach((to, from) => {
if (!isAuthenticated) return '/login'
})为什么
很多人在写导航守卫时，容易 多次调用
next()或 忘记调用next()；这样会导致导航卡死或重复触发；
因此新版 Router 改为通过 返回值（return） 控制导航，更符合
async/await思维。
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated)
next({ name: 'Login' })
// ❌ next 被调用两次
next()
})router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated)
next({ name: 'Login' })
else
next()
})虽然不推荐，但仍然「兼容」这种使用方式
全局解析守卫 beforeResolve
根据路由在元信息中的 requiresCamera 属性确保用户访问摄像头的权限：
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})全局后置钩子 afterEach
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
在守卫内的全局注入
从 Vue 3.3 开始，你可以在导航守卫内使用 inject() 方法。这在注入像 pinia stores 这样的全局属性时很有用。在 app.provide() 中提供的所有内容都可以在 router.beforeEach()、router.beforeResolve()、router.afterEach() 内获取到：
const app = createApp(App)
app.provide('global', 'hello injections')
// router.ts or main.ts
router.beforeEach((to, from) => {
const global = inject('global') // 'hello injections'
// a pinia store
const userStore = useAuthStore()
// ...
})路由独享守卫 beforeEnter
你可以直接在路由配置上定义 beforeEnter 守卫：
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。
你也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: [removeQueryParams, removeHash],
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams],
},
]当配合嵌套路由使用时，父路由和子路由都可以使用 beforeEnter。如果放在父级路由上，路由在具有相同父级的子路由之间移动时，它不会被触发。例如：
const routes = [
{
path: '/user',
beforeEnter() {
// ...
},
children: [
{ path: 'list', component: UserList },
{ path: 'details', component: UserDetails },
],
},
]示例中的 beforeEnter 在 /user/list 和 /user/details 之间移动时不会被调用，因为它们共享相同的父级路由。如果我们直接将 beforeEnter 守卫放在 details 路由上，那么在这两个路由之间移动时就会被调用。
组件内的守卫
你可以为路由组件添加以下配置：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
<script>
export default {
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}
</script>beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持 传递回调，因为没有必要了：
beforeRouteUpdate (to, from) {
// just use `this`
this.name = to.params.name
}这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (!answer) return false
}使用组合 API
如果你正在使用组合式 API 编写组件，你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。 请参考组合式 API 部分以获得更多细节。
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
// 与 beforeRouteLeave 相同，无法访问 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
const userData = ref()
// 与 beforeRouteUpdate 相同，无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
</script>