526互联

vue全家桶进阶之路37：Vue3 路由守卫

发布时间 2023-04-18 16:57:06作者: 城南城南

在 Vue.js 3.x 中，我们可以使用路由守卫来拦截路由的跳转，从而实现一些功能，例如：登录验证、页面权限控制等。

Vue.js 3.x 中的路由守卫和 Vue.js 2.x 中的基本相同，都包含了 beforeEach、beforeResolve 和 afterEach 等钩子函数。

下面是一些常见的路由守卫用法示例：

  1. beforeEach

beforeEach 在跳转之前被调用，可以用来进行登录验证等操作。示例代码如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
})

router.beforeEach((to, from, next) => {
  // 验证是否已登录
  const loggedIn = false
  if (to.path !== '/' && !loggedIn) {
    next('/')
  } else {
    next()
  }
})

在上述示例中，我们使用 beforeEach 路由守卫验证用户是否已登录，如果没有登录则跳转到首页。

  1. beforeResolve

beforeResolve 在跳转之前被调用，并且在 beforeEach 之后，可以用来进行一些异步操作等操作。示例代码如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User,
      beforeResolve: async (to, from, next) => {
        // 异步操作
        await someAsyncOperation()

        next()
      }
    }
  ]
})

在上述示例中，我们使用 beforeResolve 路由守卫进行了一些异步操作，然后在操作完成后调用了 next 方法继续跳转。

  1. afterEach

afterEach 在跳转完成之后被调用，可以用来进行一些页面操作等操作。示例代码如下：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
})

router.afterEach((to, from) => {
  // 页面操作
  console.log(`从 ${from.path} 跳转到 ${to.path}`)
})

在上述示例中，我们使用 afterEach 路由守卫进行了一些页面操作，例如在控制台中输出了跳转信息。