详解Vue3中的路由守卫

发布时间:2023年12月25日

在这里插入图片描述

本文主要介绍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

全局路由守卫 beforeEachafterEachbeforeResolve 都接收三个参数: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.beforeEachrouter.afterEachrouter.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()函数的方式,以及异步操作和守卫执行的顺序。通过合理的使用路由守卫,可以实现路由跳转的权限控制、日志记录和其他相关操作。

文章来源:https://blog.csdn.net/aahwj/article/details/135178962
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。