在 Vue 3 中，导航守卫（Navigation Guards）是用来控制路由访问权限或者执行一些路由跳转前的操作的重要工具。导航守卫允许你在路由发生变化时运行一些代码片段，比如检查用户是否已登录、保存滚动位置或者异步获取数据等。
Vue Router 4.x（Vue 3 的配套路由库）中提供了多种类型的导航守卫，它们分别在不同时刻触发：
- 全局前置守卫：在路由跳转前被调用。
- 全局解析守卫：在路由配置解析之后，但在导航被确认之前被调用。
- 全局后置守卫：在路由跳转后被调用。
- 路由独享的守卫：定义在路由配置对象中的 beforeEnter 守卫。
- 组件内的守卫：定义在组件内的 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫。
下面是如何在 Vue 3 中使用这些导航守卫的示例：
全局前置守卫
javascript复制代码
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// ... 路由配置
]
});
router.beforeEach((to, from, next) => {
// 这里可以执行一些逻辑，比如权限检查
// to 是即将要进入的目标路由对象
// from 是当前导航正要离开的路由
// next 是一个函数，一定要调用它，否则路由不会继续
// 示例：检查用户是否登录
const isLoggedIn = /* ... */;
if (to.name !== 'Login' && !isLoggedIn) {
next({ name: 'Login' }); // 跳转到登录页面
} else {
next(); // 否则，确保一定要调用 next()
}
});
export default router;
路由独享的守卫
javascript复制代码
const routes = [
{
path: '/user/:id',
component: User,
beforeEnter: (to, from, next) => {
// 这里的逻辑只会在进入 `/user/:id` 路由时执行
const userId = to.params.id;
fetchUser(userId).then(user => {
// 保存用户信息到 Vuex 或其他状态管理库
next();
}).catch(() => {
next(false); // 如果获取用户失败，则中断当前的导航
});
}
},
// ... 其他路由
];
组件内的守卫
javascript复制代码
const routes = [
{
path: '/user/:id',
component: User,
beforeEnter: (to, from, next) => {
// 这里的逻辑只会在进入 `/user/:id` 路由时执行
const userId = to.params.id;
fetchUser(userId).then(user => {
// 保存用户信息到 Vuex 或其他状态管理库
next();
}).catch(() => {
next(false); // 如果获取用户失败，则中断当前的导航
});
}
},
// ... 其他路由
];
需要注意的是，在 Vue 3 和 Vue Router 4 中，守卫函数中的 next 调用方式有所变化。不再支持 next(true) 和 next(false) 这样的用法，而是应该直接调用 next() 或者传递一个路由位置给 next 来改变导航目标。如果 next 被调用时没有传递任何参数，那么导航会继续进行。
最后，请确保你使用的 Vue Router 版本与 Vue 3 兼容，并查阅 Vue Router 的官方文档以获取最新的导航守卫使用方法和最佳实践。
