Vue生命周期有哪些？路由的有哪些

Vue.js 的生命周期分为 8 个阶段，分别是：

1. beforeCreate：实例刚被创建，组件属性计算前；
2. created：实例已经创建完成，属性已绑定，但是 DOM 还没有生成；
3. beforeMount：模板编译/挂载之前；
4. mounted：模板编译/挂载之后；
5. beforeUpdate：组件更新之前；
6. updated：组件更新之后；
7. beforeDestroy：实例销毁之前；
8. destroyed：实例销毁之后。

至于路由的生命周期，Vue Router 提供了 3 个钩子函数：

1. beforeEach：在路由跳转之前调用，可以用来进行全局的导航守卫；
2. afterEach：在每次路由跳转之后调用；
3. beforeRouteUpdate：在路由参数发生变化时调用，比如 /user/:id 这种动态路由的 id 发生变化时。

相关问题

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` 来处理进入和离开路由前的逻辑。

vue路由守卫的生命周期

Vue 路由守卫的生命周期包括全局前置守卫、路由独享的守卫、组件内的守卫。下面是各个守卫的生命周期顺序：

1. 全局前置守卫（Global before guards）：
- beforeEach：在路由切换开始之前调用。
- beforeResolve：在路由切换开始之前和组件内守卫（beforeRouteEnter、beforeRouteUpdate）执行之后调用。

2. 路由独享的守卫（Per-route guards）：
- beforeEnter：在路由进入之前调用。

3. 组件内的守卫（In-component guards）：
- beforeRouteEnter：在路由进入组件之前调用，可以访问组件实例，但此时无法访问到组件实例的 `this`。
- beforeRouteUpdate：在当前路由被复用时调用。
- beforeRouteLeave：在离开当前路由时调用。

注意：在组件内的守卫中，可以通过 `next` 参数来控制是否继续路由切换操作。

这些守卫可以通过在路由配置中添加相应的钩子函数来定义，并且可以在全局范围或具体的路由上使用。每个守卫都可以返回一个布尔值或一个 Promise 来确定是否允许或延迟路由切换。