如何在 App.vue 上设置 vue 加载组件

Posted 2023-02-23

【中文标题】如何在 App.vue 上设置 vue 加载组件

【英文标题】：how to set vue loading component on App.vue

【发布时间】：2021-09-28 20:58:28

【问题描述】：

我想将加载器添加到位于 main.js 中的 app.vue。 当我将超时设置为 5ms 时，错误组件加载正常。 但是延迟似乎对加载组件没有任何影响，它根本不显示加载组件。

import  createApp, defineAsyncComponent  from 'vue';
import loadScreen from '@components/companyLoader.vue'
const App = defineAsyncComponent(
  loader: () => import('./App.vue'),
  delay: 200,
  timeout: 3000,
  loadingComponent: loadScreen,
  errorComponent: loadScreen, //runs when timeout set to 5ms
)



const app = createApp(App)
app.mount('#app')

【参考方案1】：

我不知道是什么原因，但我有一个解决方法。在 Vue v3.2.8 上测试。您将需要一个正常加载的包装器组件 (AppWrapper) 和一个异步加载的内部组件 (App)。

您可以使用这个小功能手动检测组件何时加载：

/** Returns a promise that resolves when the async component is loaded. */
const componentLoaded = (asyncComponent, pollFrequency = 100) =>
  new Promise(resolve => 
    const timerRef = 
    timerRef.current = setInterval(() => 
      if (asyncComponent.__asyncResolved) 
        clearInterval(timerRef.current)
        resolve(asyncComponent.__asyncResolved)
      
    , pollFrequency)
  )

在加载异步组件 (App) 时，只需在包含组件 (AppWrapper) 上设置 this.loaded：

  created() 
    componentLoaded(App).then(() => 
      this.loaded = true
    )
  ,

然后使用loaded有条件地渲染一个加载组件：

  <v-if="!loaded" LoadingComponent />
  <App />

（注意你不能在<App>上使用v-else，因为它会阻止异步组件加载。它需要渲染才能异步加载。你可以使用v-show。）

【讨论】：

我最后做了类似的事情。我只是最终让 App.vue 采用了一个带有加载器的子组件。仍然不确定为什么这是一个问题，当您查看它产生的块时，它应该可以工作，因为 vue 核心与组件是分开的