详解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

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

  • 26
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue Router 提供了路由守卫来控制页面的访问权限。在 Vue 3 路由守卫的使用方式与 Vue 2 有一些不同。 在 Vue 3 ,我们可以使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 这三个路由守卫来进行页面导航的控制。 - `beforeRouteEnter`:在进入路由之前调用,可以访问组件实例 (`this`),但是此时组件实例还未被创建,因此无法访问组件的实例属性和方法。 - `beforeRouteUpdate`:在当前路由改变,但是该组件被复用时调用,可以访问组件实例 (`this`),可以根据新的路由参数来更新组件数据。 - `beforeRouteLeave`:在离开当前路由之前调用,可以访问组件实例 (`this`),可以进行一些离开前的确认操作。 下面是一个使用路由守卫的示例: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/home', component: Home, beforeEnter: (to, from, next) => { // 在进入 /home 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } }, { path: '/profile', component: Profile, beforeEnter: (to, from, next) => { // 在进入 /profile 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } } ] }); ``` 在上面的示例,我们定义了两个路由 `/home` 和 `/profile`,并分别为它们设置了 `beforeEnter` 路由守卫。在 `beforeEnter` ,我们可以根据需要进行权限判断等操作,并通过调用 `next()` 方法来继续导航。 注意,这里的示例只涉及到了全局前置守卫,还有其他类型的守卫,如组件内的守卫和全局后置守卫等。你可以根据具体需求选择使用不同类型的守卫来实现路由控制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

专业研究祖传Bug编写术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值