Vue.js 在呈现下一页之前等待Apollo查询的推荐方式？

在Nuxt应用程序中使用时，更改路由时的默认行为是在通过Apollo获取数据之前立即呈现新页面

这会导致一些非常不愉快的渲染体验，页面会进行部分渲染，并在使用来自服务器的数据完成渲染后很快完成渲染，由于现在包含数据的组件的大小不断变化，页面上的所有内容都会发生移动。这看起来很糟糕，因为数据实际上返回得相当快，所以在渲染新路由之前，等待数据返回是可以的

在呈现页面之前，建议如何等待页面（及其子组件）上的阿波罗查询完成

（有一些建议不是针对Nuxt的，但我不知道如何将建议转化为Nuxt应用程序。）

---

我很想看到一个代码示例，使用

beforeRouteEnter

通过Apollo获取数据，并且只有在获取数据后才进入路线。

我不熟悉Apollo，但我认为这就是您要寻找的：

//Router.js
路由前（到、从、下一个）
{
executeSomeApolloPromise（）。然后（（数据）=>{
//承诺现已完成；请继续查看组件。
下一步（（vm）=>{
//您可以通过“vm”在此处访问组件实例。
//请注意，“beforeRouteEnter”是唯一具有此功能的防护装置。
vm.data=数据；
});
});
}

---

请参见

以前没有使用过此模块，但它应该与在Nuxt中呈现页面之前要执行的任何其他异步操作一样

这仅取决于您是否要预先填充存储：

或仅一页：

如果在呈现页面之前有多个请求，则可以使用async/await或Promissions

异步操作完成后，Nuxt开始呈现页面。这适用于SSR，如果您导航到客户端上的页面（当发出真正的请求时，nuxtServerInit将只触发一次，而不是在客户端导航时）

---

旁注：在通常使用RouteEnter之前，用于验证参数并检查路由是否允许。

是否尝试禁用预取

---

预取：false

最佳方法是使用加载属性：

<template>
    <div v-if="!this.$apollo.loading">
        Your product: {{product}}
    </div>
</template>

<script>

export default {
    name: "Product",
    apollo: {
        product: {
            query: productQuery,
            variables() {
                return {
                    productId: this.productId
                }
            }
        }
    }
}
</script>

您的产品：{{product}}
导出默认值{
名称：“产品”，
阿波罗：{
产品：{
查询：productQuery，
变量（）{
返回{
productId:this.productId
}
}
}
}
}

这看起来很有希望。我将尝试一下。我遇到的问题是：如果我没有Vue实例的aves，如何访问$apollo？你没有。因此，您必须具有对Vue实例的访问权限。这并不能完全满足我的要求，即在更改到下一页之前，请等待上一页。我认为，这个解决方案将立即更改到新页面，但由于

v-if

，它将显示为空白。如果不是这样，你介意发布一个Codepen/CodeSandbox/etc来说明这是如何工作的吗？