Vue 路由守卫详细介绍与演示

news2024/12/29 9:09:31

在这里插入图片描述

Vue 路由守卫是一种在 Vue.js 应用程序中控制路由导航的机制，它允许你在路由变化前、后或在特定路由上执行代码，以便实现诸如权限控制、数据加载、页面切换动画等功能。在下面的介绍中，我将首先提供官方定义和通俗解释，然后详细介绍全局前置路由守卫、全局后置路由守卫、独享路由守卫和组件内路由守卫，并为每个概念提供示例演示。

总体概念

官方介绍

Vue 路由守卫是一组回调函数，它们允许你在路由导航过程中拦截并执行额外的逻辑。路由守卫可以用于全局的路由导航控制、单个路由的导航控制，以及在组件内部的导航控制。

通俗解释

路由守卫就像是应用程序中的 “导航警卫”，它们能够监控和管理你的页面之间的切换。它们可以帮助你做一些有用的事情，比如在进入某个页面之前检查用户是否有权限，或者在页面切换时添加一些动画效果。

全局前置路由守卫

概念

全局前置路由守卫是在路由切换之前执行的函数，它可以用来检查用户的身份、权限等，并在必要时中止或继续路由导航。

示例

router.beforeEach((to, from, next) => {
  // 检查用户是否登录
  if (!isAuthenticated()) {
    next('/login'); // 如果未登录，重定向到登录页面
  } else {
    next(); // 已登录，继续路由导航
  }
});

全局后置路由守卫

概念

全局后置路由守卫是在路由切换之后执行的函数，它可以用来处理一些与路由导航相关的任务，例如页面加载完成后的数据处理。

示例

router.afterEach((to, from) => {
  // 记录路由切换日志
  console.log(`从 ${from.path} 到 ${to.path}`);
});

独享路由守卫

概念

独享路由守卫是在某个特定路由上定义的守卫，它只会影响该路由的导航。这使得你可以为不同的路由定义不同的导航逻辑。

示例

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 检查用户是否是管理员
        if (isAdmin()) {
          next(); // 是管理员，继续导航
        } else {
          next('/login'); // 不是管理员，重定向到登录页面
        }
      },
    },
  ],
});

组件内路由守卫

概念

组件内路由守卫是在组件内部定义的守卫，它可以用来处理与组件特定的路由导航相关的逻辑。

示例

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入该组件之前执行
    // 可以在这里获取路由参数或数据
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在组件复用时执行
    // 可以处理路由参数或数据的变化
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开该组件时执行
    // 可以进行一些清理操作或弹出确认提示
    next();
  },
};