在输入路线之前加载路线数据的推荐方法？

Question

在为给定路线渲染页面之前，我想首先同步获取必要的数据。理想情况下，我希望在页面组件中获取数据，但我不反对在路由器文件中执行此操作。我已经阅读并尝试了各种方法，但部分挑战来自于这样一个事实：构建组件的方法也有多种，并且某些功能的使用也各不相同。

就我而言，我使用 Composition API 和<script setup>语法构建单个文件组件。Vue Router文档链接讨论了“导航前获取”，我可以在其中找到beforeRouteEnter或beforeRouteUpdate，但这是使用选项 API 显示的。他们确实有Composition API的页面提到我可以使用onBeforeRouteUpdate，但它使用了该setup()函数。我想无论如何我都会尝试一下<script setup>：

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(() => {
  console.log('onBeforeRouteUpdate')
})
</script>

然而，这并不执行。我尝试过的最接近的方法是在路由器中获取数据，使用守卫beforeEnter，并将数据设置到meta属性上，然后可以在组件中的路由实例上访问该属性：

beforeEnter: (to, from, next) => {
  fetch('https://pokeapi.co/api/v2/pokemon/ditto')
    .then(res => res.json())
    .then(res => {
    to.meta.pokemon = res;

    next();
  });
}

但文档中注明的这一点beforeEnter仅在进入路线时触发。参数更改不会重新触发此操作，这意味着我必须在组件中的路线上设置一个观察程序。我还不如在组件本身中拥有所有这些逻辑。

我似乎找不到一个好的方法来做到这一点，但我可能忽略了一些事情。如果有人有一些指示或建议，我将不胜感激。提前致谢。

Answer 1

有一个解决方案 - 使用顶级等待 - https://vuejs.org/api/sfc-script-setup.html#top-level-await

只需将 RouterView 组件包装在 Suspense 组件中，如下所示 - https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components（不要使用不需要的组件）

唯一需要注意的是，“加载屏幕”将在初始请求时可见。

我为你做了一个小演示，这样你就可以尝试一下 - https://github.com/ileue/vue-top-level-await-demo