在渲染路由器视图之前,如何在启动期间在 App.vue 中异步加载数据?

分享于2022年07月17日 vue.js 问答
【问题标题】:在渲染路由器视图之前,如何在启动期间在 App.vue 中异步加载数据?(How to load data asynchronously inside App.vue during startup before rendering the router-view?)
【发布时间】:2022-06-15 14:20:27
【问题描述】:

我通过 npm init vue@latest 使用路由器项目设置了一个新的 Vue。在渲染 router-view 之前,我必须异步加载一些数据并将其作为道具传递给 router-view

App.vue 文件更改为




不会呈现当前的路由器视图并出现警告

[Vue warn]: Component : setup function returned a promise, but no  boundary was found in the parent component tree. A component with async setup() must be nested in a  in order to be rendered. 
  at 

但是我的 App.vue 文件没有任何父文件,所以我不能将它包装在 suspense 标记中。但是如何在渲染视图之前获取一些数据呢? (如果某些事情失败了,可能会显示一个错误框)

我是否必须创建一个 NestedApp.vue 文件,只是为了将其包装在一个 suspense 标记中?

我必须想出这样的东西吗?





作为旁注我想做的事:

应用程序必须以包含 base64 编码数据的 url 哈希开始,这是一个基本 url。在提取和解码之后,我必须在渲染路由器视图之前使用这个 url 获取一些数据。

那么也许这个设置代码有一些更好的地方?我考虑过 main.ts 文件,但如果出现问题,我可以在 App.vue 文件中显示一个错误警报框。

  • “我是否必须创建一个 NestedApp.vue 文件,只是为了将它包装在一个 suspense 标记中?” - 是的。它们可以称为 AppContainer 和 App,或者其他任何方式。
  • 可以在异步created()中加载数据,然后使用v-if来阻止渲染dom。

【解决方案1】:

你可以在 async created() 中加载数据,然后使用 v-if 来阻止渲染 dom。 (您可以改为显示加载屏幕或微调器。)

new Vue({
  el: '#app',
  data: {
    isLoaded: false,
  },
  async created() {  
    // load data (async/await)...
    await new Promise(r => setTimeout(r, 2000)); // wait 2 sec...
 
    this.isLoaded = true;
  }
})


Loaded! -> show data
Loading...