"vue-router/composables" 中为什么没有提供 onBeforeRouteEnter？

在 Vue 3 中，vue-router 提供了新的组合式 API（Composables），这些 API 旨在与 Vue 3 的 Composition API 一起使用。然而，onBeforeRouteEnter 这个特定的导航守卫并没有直接在 vue-router/composables 中提供。原因主要有以下几点：

1. 组合式 API 的设计理念

组合式 API 的设计理念是将逻辑拆分为更小的、可重用的单元。vue-router 的组合式 API 也遵循这一理念，提供了一些基本的导航守卫和路由信息的访问方法，而不是直接提供所有可能的守卫。

2. 替代方案

虽然 vue-router/composables 没有直接提供 onBeforeRouteEnter，但你可以使用其他方法来实现类似的功能。以下是一些替代方案：

使用 onBeforeRouteUpdate 和 onBeforeRouteLeave

你可以使用 onBeforeRouteUpdate 和 onBeforeRouteLeave 来实现类似的逻辑。虽然它们不是完全等同于 onBeforeRouteEnter，但在某些情况下可以达到类似的效果。

import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      // 在路由更新前执行的逻辑
    })

    onBeforeRouteLeave((to, from) => {
      // 在离开当前路由前执行的逻辑
    })

    return {}
  }
}

使用 beforeRouteEnter 钩子

尽管 vue-router/composables 没有提供 onBeforeRouteEnter，你仍然可以在 setup 函数中使用 beforeRouteEnter 钩子。这个钩子在组件实例被创建之前调用，因此不能访问 this，但可以通过 next 回调传递数据给组件实例。

import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行的逻辑
    next(vm => {
      // 通过 vm 访问组件实例
    })
  },
  setup() {
    // 其他组合式 API 逻辑
    return {}
  }
})

3. 为什么不直接提供 onBeforeRouteEnter

• 复杂性：onBeforeRouteEnter 钩子在组件实例被创建之前调用，这使得它在组合式 API 中的实现较为复杂。组合式 API 通常在组件实例已经创建后使用，因此直接提供 onBeforeRouteEnter 可能会导致混淆和复杂性。
• 灵活性：通过组合式 API，你可以更灵活地组合和重用逻辑。虽然 onBeforeRouteEnter 是一个常用的钩子，但通过其他方法和组合式 API，你可以实现类似的功能，同时保持代码的灵活性和可维护性。

总结

虽然 vue-router/composables 没有直接提供 onBeforeRouteEnter，但你可以使用其他方法（如 beforeRouteEnter 钩子或 onBeforeRouteUpdate 和 onBeforeRouteLeave）来实现类似的功能。这些方法提供了足够的灵活性，使你能够在 Vue 3 的组合式 API 中管理路由导航守卫。

如何解决？

Vue Router 公开的组合式 API 函数 useRoute, useRouter, onBeforeRouteLeave, onBeforeRouteUpdate,

要使用beforeRouteEnter 就要新增一个script

<script lang="ts">
export default {
  beforeRouteEnter(to, from, next) {
    console.log("About Page beforeRouteEnter", to, from);
    if (from.name === "xxx") {
      next();
    } else {
      window.scrollTo(0, 0);
      next((e) => {
        console.log("e", e);
      });
    }
  },
};
</script>