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

【问题标题】：在渲染路由器视图之前，如何在启动期间在 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...

分享于2022年07月17日 vue.js 问答