详解Vue3中的路由守卫

本文主要介绍Vue3中的路由守卫。

在Vue3中，路由守卫是用来控制和管理路由跳转的一种机制。它可以在路由跳转前、跳转后或者在跳转过程中进行一些操作，如权限验证、登录判断、路由拦截等。

Vue3中的路由守卫分为全局守卫和路由级别守卫。

一、全局守卫

全局守卫作用于整个应用的所有路由，包括路由跳转前、跳转后以及跳转过程中的操作。在Vue3中，全局守卫有三种：

• beforeEach: 在路由跳转前执行的操作，可以在这里进行权限验证、登录判断等。
• afterEach: 在路由跳转后执行的操作。
• beforeResolve: 在导航被确认之前，所有组件内守卫和异步路由组件被解析之后调用。

全局守卫的使用方法如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在这里进行权限验证、登录判断等操作
  next() // 跳转到下一个路由
})

router.afterEach(() => {
  // 跳转后的操作
})

router.beforeResolve((to, from, next) => {
  // 在导航被确认之前的操作
  next()
})

export default router

全局路由守卫 beforeEach、afterEach 和 beforeResolve 都接收三个参数：to、from 和 next。

1. to 参数：表示即将跳转到的路由对象。它包含了目标路由的信息，如路径、参数、查询参数等。

2. from 参数：表示当前导航正要离开的路由对象。它也包含了当前路由的信息。

3. next 参数：是一个函数，用于控制路由跳转的行为。它可以接收一个参数，用于指定要跳转的目标路由路径或一个 false 值来取消导航。

下面分别详细介绍这三个参数的用法：

1. to 参数的用法：

   • to.path：目标路由的路径。
   • to.params：目标路由的参数对象。
   • to.query：目标路由的查询参数对象。
   • to.fullPath：完整的目标路由路径，包含参数和查询参数。

2. from 参数的用法：

   • from.path：当前路由的路径。
   • from.params：当前路由的参数对象。
   • from.query：当前路由的查询参数对象。
   • from.fullPath：完整的当前路由路径，包含参数和查询参数。

3. next 参数的用法：

   • next()：调用 next()，表示允许路由跳转。
   • next(false)：调用 next(false)，表示取消路由导航。
   • next('/')：调用 next('/')，表示重定向到指定路径。
   • next({...})：调用 next({...})，表示重定向到指定路由对象。

下面是一个简单的示例，展示了如何在全局路由守卫中使用这些参数：

router.beforeEach((to, from, next) => {
  console.log('跳转到:', to.path)
  console.log('来自:', from.path)

  // 进行权限验证或登录判断
  if (!isAuthenticated) {
    next('/login') // 重定向到登录页面
  } else {
    next() // 允许路由跳转
  }
})

router.afterEach((to, from) => {
  console.log('路由跳转完成')
})

router.beforeResolve((to, from, next) => {
  console.log('即将确认跳转:', to.path)
  next() // 允许路由跳转
})

在上面的示例中，beforeEach 守卫在路由跳转前进行了权限验证，如果用户未登录，则重定向到登录页面。afterEach 守卫在路由跳转后进行了日志输出。beforeResolve 守卫在导航被确认之前打印了目标路由的路径，并允许了路由跳转。

通过了解和使用这些参数，我们可以更好地控制和管理路由跳转过程中的行为。

二、路由级别守卫

路由级别守卫只作用于某个具体的路由，可以在路由配置中定义，包括路由进入前、进入后以及离开前的操作。在Vue3中，路由级别守卫有四种：

• beforeEnter: 在路由进入前执行的操作。
• beforeLeave: 在路由离开前执行的操作。
• beforeRouteEnter: 在路由进入前执行的操作，但是在组件实例被创建之前调用，所以无法获取到组件实例。
• beforeRouteUpdate: 在路由更新时执行的操作，比如路由参数发生变化时。

路由级别守卫的使用方法如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/example',
      component: Example,
      beforeEnter: (to, from, next) => {
        // 路由进入前的操作
        next()
      },
      beforeLeave: (to, from, next) => {
        // 路由离开前的操作
        next()
      }
    }
  ]
})

export default router

以上就是Vue3中路由守卫的介绍。通过使用路由守卫，我们可以方便地控制和管理路由的跳转，实现一些常见的功能，如权限验证、登录判断等。

三、使用注意事项

在使用路由守卫（beforeEach、afterEach和beforeResolve）时，以下是在Vue3中需要注意的几个方面：

1. 守卫注册：Vue3中使用路由守卫的方式与Vue2有所不同。在Vue3中，你需要通过router.beforeEach()、router.afterEach()和router.beforeResolve()方法来注册全局守卫。而不再使用之前的router.beforeEach、router.afterEach和router.beforeResolve等直接在路由配置中注册的方式。

2. 守卫传递：Vue3中的路由守卫函数是通过中间件的方式进行传递的，类似于Koa中间件。需要使用next函数来控制路由的跳转行为。在守卫中一定要调用next()函数去允许路由的正常跳转，否则路由会被阻止。

3. 路由跳转的控制：在Vue3中，next()函数可以接收一个参数来控制路由跳转的行为。常见的用法包括：

   • next()：允许路由跳转。
   • next(false)：取消路由导航。
   • next('/')：重定向到指定路径。
   • next({...})：重定向到指定路由对象。

4. 守卫内部的异步操作：Vue3中的路由守卫可以是异步的。例如，你可以在beforeEach守卫中进行异步的权限验证或登录检查。但要注意，在异步操作完成之前，你需要保证调用next()函数来允许路由继续跳转，否则路由将被阻止。

5. 多个守卫的执行顺序：在Vue3中，通过router.beforeEach()和router.beforeResolve()注册的多个守卫函数会按照注册的顺序依次执行。而router.afterEach()守卫函数会在所有守卫完成后执行。

总结起来，在使用路由守卫时，需要注意注册的方式、守卫传递和调用next()函数的方式，以及异步操作和守卫执行的顺序。通过合理的使用路由守卫，可以实现路由跳转的权限控制、日志记录和其他相关操作。