vue3路由守卫使用

Vue3 的路由守卫使用和 Vue2 有些不同，主要是在使用上有所改变。在 Vue3 中，我们可以通过 `router.beforeEach`、`router.beforeResolve` 和 `router.afterEach` 这三个方法来实现路由守卫。

具体使用方法如下：

1. 在 `router/index.js` 中引入 `createRouter` 和 `createWebHistory`：

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

2. 创建路由实例：

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

3. 使用 `router.beforeEach`、`router.beforeResolve` 和 `router.afterEach` 方法来实现路由守卫：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象，next 是一个函数，用于跳转到下一个路由
  // 如果需要跳转到下一个路由，则调用 next() 方法
  // 如果需要取消跳转，则调用 next(false)
  // 如果需要跳转到指定的路由，则调用 next({ path: '/login' })
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // 在所有组件内守卫和异步路由组件被解析之后，但在任何组件被渲染之前调用
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 在每个路由被确认之后调用
})