搜索

首页  >  问答  >  正文

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

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

就我而言,我使用 Composition API 和

P粉197639753P粉197639753374 天前1107

全部回复(2)我来回复

  • P粉546257913

    P粉5462579132023-11-18 12:39:56

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

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

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

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

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

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

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

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


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

    回复
    0
  • P粉545956597

    P粉5459565972023-11-18 11:49:37

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

    回复
    0
  • 取消回复