Vue 导航守卫：从 Vue2 到 Vue3 的演变与实践-CSDN博客

本文链接：https://blog.csdn.net/m0_57836225/article/details/142697884

在 Vue 开发中，导航守卫是一个强大的工具，它可以在路由切换的不同阶段进行控制和干预。本文将首先介绍 Vue2 中的导航守卫，然后探讨在 Vue3 中的变化，并给出相应的代码示例。

一、Vue2 中的导航守卫

在 Vue2 中，导航守卫主要分为三大类：全局路由守卫、路由独享守卫和组件内守卫。

全局路由守卫
- 全局导航守卫在整个 Vue 项目中都会生效，无论哪个页面的路由切换都会涉及到。然而，其使用率并不高，因为它会影响到所有的路由。例如在金融类项目中，如网贷等，可能会在用户下载完 APP 后，进入 APP 就要求用户登录，此时可能会用到全局导航守卫来判断用户身份。
- 相关的导航守卫钩子有 beforeEach 和 afterEach 等。
路由独享守卫
- 路由独享守卫是比较推荐的一种方式。它可以在特定的路由配置中进行守卫设置，只对特定的路由生效。比如在某个需要判断用户身份才能进入的路由中，可以直接在该路由的配置中添加守卫。
- 代码示例：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 在这里进行判断逻辑
        console.log('进入关于我们页面前的守卫');
        next();
      }
    }
  ]
});

组件内守卫
- 组件内守卫不太推荐，因为在项目中有大量组件时，后期维护会非常困难。如果在几百个组件中都添加守卫，维护成本会很高。

二、Vue3 中的导航守卫

在 Vue3 中，导航守卫的使用方式有了一些变化。

全局路由守卫
- 在 Vue3 中，创建路由实例的方式有所改变。全局前置守卫使用 router.beforeEach，全局后置守卫使用 router.afterEach。
- 代码示例：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  // 全局前置守卫逻辑
  next();
});

router.afterEach((to, from) => {
  // 全局后置守卫逻辑
});

路由独享守卫
- 和 Vue2 类似，在 Vue3 中也可以在路由配置中设置独享守卫。
- 代码示例：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 守卫逻辑
        next();
      }
    }
  ]
});

组件内守卫
- 在 Vue3 中，组件内守卫的使用方式也有所调整。可以使用 onBeforeRouteEnter、onBeforeRouteUpdate 和 onBeforeRouteLeave 这三个钩子函数。
- 代码示例：

<template>
  <div>组件内容</div>
</template>

<script>
export default {
  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    // 进入组件前的守卫逻辑
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 路由参数变化时的守卫逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 离开组件前的守卫逻辑
    next();
  }
};
</script>

通过以上介绍，我们可以看到 Vue2 和 Vue3 中的导航守卫在使用方式上有一些相似之处，也有一些变化。在实际开发中，我们可以根据项目的需求选择合适的导航守卫方式，以实现更加灵活和安全的路由控制。