阿珊详解Vue Router的守卫机制

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. 🔧 全局守卫
  - 2. 🔧 路由独享的守卫
  - 3. 🔧 组件内的守卫
- 总结
- 参考资料：

摘要：

🤔 Vue Router提供了强大的守卫机制，用于在路由跳转前后进行操作和判断。本文将介绍Vue Router的守卫类型及其应用，帮助读者更好地掌握路由管理。👩‍💻

引言：

🌈 Vue.js以其简洁的语法和声明式的数据绑定受到开发者的喜爱。在单页面应用（SPA）中，路由管理是不可或缺的功能。Vue Router作为Vue的路由器库，提供了丰富的功能，其中守卫机制是其中一个重要的特点。本文将带你深入了解Vue Router的守卫机制，并学会如何使用它们来管理路由。🚀

正文：

1. 🔧 全局守卫

类型：全局守卫是对路由跳转的全局控制，可以在路由跳转的前后进行操作。
应用场景：例如，全局判断用户是否登录，根据登录状态决定是否允许访问某个路由。

全局守卫是 Vue Router 提供的全局拦截器，可以在路由导航过程中对请求进行拦截处理。全局守卫有三种类型：beforeEach、beforeEnter 和 afterEach。

beforeEach：在导航守卫中调用，进入路由之前调用。可以通过 next 函数继续导航，或者通过返回 false 取消导航。
beforeEnter：在导航守卫中调用，进入路由之前调用。这个钩子可以访问 to 和 from 对象，可以通过 next 函数继续导航，或者通过返回 false 取消导航。
afterEach：在导航守卫中调用，进入路由之后调用。这个钩子可以访问 to 和 from 对象，但是不能取消导航。

以下是一个简单的示例：

// 导入 Vue 和 Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';

// 注册 Vue Router
Vue.use(VueRouter);

// 定义路由
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent,
  },
];

// 创建 router 实例
const router = new VueRouter({
  mode: 'history',
  routes,
});

// 在全局守卫中使用 beforeEach
router.beforeEach((to, from, next) => {
  console.log('全局守卫 - beforeEach');
  next();
});

// 在全局守卫中使用 beforeEnter
router.beforeEnter((to, from, next) => {
  console.log('全局守卫 - beforeEnter');
  next();
});

// 在全局守卫中使用 afterEach
router.afterEach((to, from) => {
  console.log('全局守卫 - afterEach');
});

// 导出 router 实例
export default router;

在这个示例中，我们定义了全局守卫，分别在进入路由之前、进入路由之后和导航守卫中调用。当导航到不同的路由时，会打印相应的全局守卫日志。

2. 🔧 路由独享的守卫

类型：路由独享的守卫是指对单个路由进行控制，可以在进入或离开路由时进行操作。
应用场景：例如，进入某个路由前检查权限，或者离开某个路由前保存数据。

路由独享的守卫是 Vue Router 提供的在特定路由上拦截器，可以在路由导航过程中对请求进行拦截处理。路由独享的守卫通过在路由对象上定义 beforeEnter 属性来实现。

下面是一个简单的示例：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
    beforeEnter: (to, from, next) => {
      // 在这里编写拦截逻辑
      if (/* 满足条件 */) {
        next(); // 继续导航
      } else {
        next('/login'); // 跳转到登录页面
      }
    },
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent,
  },
];

在这个示例中，我们为 / 路由添加了 beforeEnter 属性，当导航到 / 路由时，会先执行 beforeEnter 中的逻辑，如果满足条件，则继续导航，否则跳转到登录页面。

需要注意的是，路由独享的守卫只对当前路由生效，不会影响其他路由的导航。

3. 🔧 组件内的守卫

类型：组件内的守卫是对组件路由的局部控制，可以在组件加载、更新或销毁时进行操作。
应用场景：例如，在组件加载时获取数据，或者在组件更新时进行数据更新。

组件内的守卫是 Vue Router 提供的在组件内部拦截器，可以在路由导航过程中对请求进行拦截处理。组件内的守卫有三种类型：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

beforeRouteEnter：在导航守卫中调用，进入路由之前调用。此时，组件实例还没有被创建。可以通过 next 函数继续导航，或者通过返回 false 取消导航。
beforeRouteUpdate：在导航守卫中调用，路由更新之前调用。此时，组件实例已经被创建，可以通过 next 函数继续导航，或者通过返回 false 取消导航。
beforeRouteLeave：在导航守卫中调用，离开路由之前调用。此时，组件实例已经被创建，可以通过 next 函数继续导航，或者通过返回 false 取消导航。

以下是一个简单的示例：

export default {
  name: 'App',
  beforeRouteEnter(to, from, next) {
    console.log('组件内守卫 - beforeRouteEnter');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内守卫 - beforeRouteUpdate');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内守卫 - beforeRouteLeave');
    next();
  },
};