Javascript Vue beforeRouteEnter等待子组件完成请求

我有一个Vue应用程序，使用beforeRouteEnter加载数据，避免“卸载内容的闪现”。在某些页面上，这很简单：

 async beforeRouteEnter(to, from, next) {
    const newestPosts = await getNewestPosts();
    next(vm => vm.posts = newestPosts);
}

但当数据存在于页面的子组件中时，如何使其工作还不清楚

假设我有一个这样的结构

<search-page>
  <posts-list :query="$params.query">
  </posts-list>
</search-page>

---

但是看起来我必须将所有的抓取逻辑放在beforeRouteEnter函数中。但这意味着我必须对每个页面都这样做—删除

组件的一些实用程序。这是唯一有效的解决方案吗？我不太清楚vuex在这里是否是一个解决方案。我了解vuex如何帮助处理状态（例如“sidebar.open”），但它能否帮助管理搜索结果，让我将获取逻辑保留在

中？

如果获取帖子所需的数据包含在

$params.query

中，一种方法是在

posts列表

组件中查询

prop。当看到更改时，
posts list
可以确定它是否表示获取的原因，并在设置某种加载占位符（如nifty）后异步执行该操作，这对于空状态是一种很好的视觉折衷

我会避免试图干扰路由更改，而是考虑如何在组件中使用“需要知道”的反应式逻辑。如果获取帖子所需的数据包含在
$params.query
中，一种方法是在
帖子列表
组件中使用
查询
属性。当看到更改时，
posts list
可以确定它是否表示获取的原因，并在设置某种加载占位符（如nifty）后异步执行该操作，这对于空状态是一种很好的视觉折衷

我将避免试图干扰路由更改，而是考虑如何在组件中使用“需要知道”的反应逻辑。
加载父级中的数据，并通过props将其传递给子级加载父级中的数据，然后通过props将其传递给子级
 async beforeRouteEnter(to, from, next) {
    await this.$refs.postsList.finishedPromise;
    next();
}