在访问路线之前预加载路线数据的最佳方法。

Question

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

就我而言，我使用 Composition API 和

Answer 1

首先，beforeRouteUpdate仅在更新实际路由时触发，但不会像官方那样转到另一个组件/页面这里告诉。

关于什么可能触发生命周期挂钩的示例是

<button @click="$router.push({ hash: `#${Math.floor(Math.random() * 10)}` })">
  random hash
</button>

onBeforeRouteLeave 完美地工作，正如你所期望的那样，从一个页面移动到另一个页面时。

对于最初的问题，您可以实现某种路由器中间件 就像 Nuxt 做到了。这样，您就可以等待 HTTP 调用，并且只有在那时才允许实际导航。因此几乎可以创建块导航效果。

我不确定如何使用 Composition API 编写它，但我知道它可以与 Options API 完美配合（有很多可用的博客文章）。 setup 本身以它自己的生命周期方式运行，我想很多事情都相当棘手。

TLDR：在我看来，一个好的路由器中间件+页面包装器（如布局）是您案例中的完美组合。在那里，您可以同时为相当多的页面设置一个观察者。

但是一切都取决于您想要如何组织自己并构建代码。

---

骨架屏幕给人一种比阻塞更快的感觉，但总的来说，您也可以使用 prefetch （默认情况下也随 Nuxt 一起提供）以获得一些提示并可能在需要某些资源之前加载它们。 （+同一域中的其他技巧来加速您的网络请求）

Answer 2

有一个解决方案 - 使用顶级等待 - 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