Vue Router提供了多种导航守卫

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

在Vue 3中，Vue Router提供了多种导航守卫，这些守卫可以在路由跳转的不同阶段执行特定的逻辑。以下是关于全局前置守卫和全局后置守卫的详细介绍，包括它们的功能、工作机制以及具体的应用示例。

全局前置守卫

功能

全局前置守卫（router.beforeEach）在每次路由跳转之前被调用。它允许开发者在导航发生之前执行一些逻辑，例如权限验证、用户身份检查、页面加载前的准备工作等。

工作机制

• 参数：全局前置守卫接收两个参数：
  • to: 即将要进入的目标路由对象。
  • from: 当前导航正要离开的路由对象。
• 返回值：
  • false: 取消当前的导航。如果浏览器的 URL 改变了（可能是用户手动或浏览器后退按钮），则 URL 地址会重置到 from 路由对应的地址。
  • 一个路由地址：通过一个路由地址重定向到一个不同的地址，如同调用 router.push()。
  • undefined 或 true: 导航是有效的，继续执行下一个导航守卫。
    

示例

假设我们有一个需要用户登录才能访问的页面，可以在全局前置守卫中进行权限验证：

const router = createRouter({
   
   
  // 路由配置
});

router.beforeEach(async (to, from) => {
   
   
  const isAuthenticated = await checkUserAuthentication(); // 假设这是一个异步函数
  if (!isAuthenticated && to.name !== 'Login') {
   
   
    return {
   
    name: 'Login' }; // 如果用户未登录且目标路由不是登录页，则重定向到登录页
  }
  return true; // 继续导航
});

在这个示例中，checkUserAuthentication 是一个异步函数，用于检查用户是否已登录。如果用户未登录且目标路由不是登录页，则导航会被重定向到登录页。

全局后置守卫