vue-router 组合式API为什么不提供beforeRouterEnter？

[LostElkByte]

需求描述：

1.在 A 页面（keep-alive 为 true）中，用户滑动页面到距顶部 200px 的位置。
2.用户从 A 页面跳转到 B 页面，在跳转之前使用 onBeforeRouteLeave 存储当前页面的滑动位置（距顶部的 200px）。
3.当用户从 B 页面返回到 A 页面时，恢复 A 页面跳转前的滑动位置（即滚动到距顶部 200px 的位置）。

问题：

由于 Vue 3 的组合式 API 不提供 onBeforeRouteEnter 钩子，导致在 B 页面返回到 A 页面时，我不知如何优雅的使用组合式 API 恢复滚动位置。
我当前有两个解决方案：

1.通过在 A 页面多添加一个script并且使用选项式 API 来解决该问题

<script lang="ts">
export default {
  data() {
    return {
      scrollTop: 0
    };
  }
  beforeRouteLeave(to, from, next) {
    // 记录当前的滚动条位置
    this.scrollTop =
      window.scrollY ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm: any) => {
      setTimeout(() => {
        window.scrollTo(0, vm.scrollTop);
      }, 0);
    });
  },
};
</script>

2.通过在A页面使用，onActivated来替代beforeRouteLeave，因为我设置了keep-alive为true。

const scrollTop = ref(0);

onActivated(() => {
  setTimeout(() => {
    window.scrollTo(0, scrollTop.value);
    console.log(scrollTop.value, "🐷");
  }, 0);
});

onBeforeRouteLeave(() => {
  // 记录当前的滚动条位置
  scrollTop.value =
    window.scrollY ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
});

但是我觉得这样并不好，是否有更优化的解决办法？

[pdsuwwz]

@LostElkByte 你可以尝试在 defineOptions 里面添加 beforeRouteEnter 方法：

defineOptions({
  beforeRouteEnter: async (to, from, next) => {
    // ...
    next()
  },
})

需要注意的是在 beforeRouteEnter 内无法获取到当前组件实例对象，因为当守卫执行时，组件实例还未被创建, 如果你需要记录位置并想在下次获取到上次的位置，你可以使用 pinia 或 全局 hook 的形式来记录数据

这里有一个我整理的 Playground，或许能提供一些参考。