vue3 路由导航守卫使用

在 Vue3 中，路由导航守卫使用方式与 Vue2 有些不同。

首先，在创建 Vue Router 实例时，需要使用 `createRouter` 方法而非 `new VueRouter` 方法。

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

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

接下来，在路由配置中，使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 代替 Vue2 中的 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 钩子函数。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeRouteEnter(to, from, next) {
      // 在进入路由前执行
      next()
    },
    beforeRouteUpdate(to, from, next) {
      // 在路由更新前执行
      next()
    },
    beforeRouteLeave(to, from, next) {
      // 在离开路由前执行
      next()
    }
  },
  // ...
]

需要注意的是，在 Vue3 中，`beforeRouteEnter` 钩子函数不能直接访问组件实例（`this`），需要使用回调函数来访问。

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 在进入路由后执行，可以访问组件实例
    console.log(vm)
  })
}

另外，`beforeRouteUpdate` 钩子函数只有在路由参数发生变化时才会触发。

完整示例：

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

const Home = { /* ... */ }

const About = { /* ... */ }

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter')
        next()
      },
      beforeRouteUpdate(to, from, next) {
        console.log('beforeRouteUpdate')
        next()
      },
      beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave')
        next()
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router