在访问路线之前预加载路线数据的最佳方法。
P粉197639753
P粉197639753 2023-11-17 14:54:42
0
2
1106

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

就我而言,我使用 Composition API 和

P粉197639753
P粉197639753

全部回复(2)
P粉546257913

首先,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 一起提供)以获得一些提示并可能在需要某些资源之前加载它们。 (+同一域中的其他技巧来加速您的网络请求)

P粉545956597

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板