vue3 路由生命周期

Vue 3 中的路由生命周期与 Vue 2 中的路由生命周期有所不同。在 Vue 3 中，Vue Router 的生命周期钩子函数被移除了，取而代之的是使用组合式 API 来处理路由相关的逻辑。

在使用 Vue 3 + Vue Router 时，你可以使用 `useRoute` 和 `useRouter` 这两个核心函数来访问当前的路由信息和路由对象。

`useRoute` 函数返回当前路由的信息对象，你可以通过它获取当前路由的路径、参数、查询参数等信息。

`useRouter` 函数返回一个用于导航路由的对象，你可以使用它来进行编程式导航。

下面是一个简单的示例：

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

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

// 在组件中使用
import { useRoute, useRouter } from 'vue-router'
import { onBeforeRouteEnter, onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    onBeforeRouteEnter(() => {
      // 进入路由前的逻辑
    })

    onBeforeRouteLeave(() => {
      // 离开路由前的逻辑
    })

    return { route, router }
  }
}

通过上述示例，你可以在组件中使用 `useRoute` 和 `useRouter` 来获取路由信息和进行编程式导航，同时使用 `onBeforeRouteEnter` 和 `onBeforeRouteLeave` 来处理进入和离开路由前的逻辑。