Vue3-显示加载程序，直到所有子组件都加载完毕

Question

在等待加载其他组件时，我在显示Vue Loader组件时遇到问题。

<div id="app">
<loader v-if="!componentsReady"></loader>
<some-page v-else></some-page>
</div>

<Loader>不显示，因为它本身就是一个vue组件。(根据逻辑，它正在等待所有子组件加载(

app.js

在这里，我想显示Loader组件，并等待SomePage及其子组件被加载。

在mounted上，我设置组件已准备好，但这样我也不会显示Loader组件，如果它不是异步的。

import Loader from "./Loader";
const app = createApp({
data() {
return {
componentsReady: false
}
},
components: {
SomePage: defineAsyncComponent(() => import('./somePage')),
Loader
},
mounted() {
this.$nextTick(() => {
this.componentsReady = true;
});
}
});
app.mount('#app');

Answer 1

在vue3中，您有一个Suspense组件，它可能有助于cf。https://v3-migration.vuejs.org/breaking-changes/suspense.html

但我认为，你正在寻找的更像是v型斗篷指令。https://v3.vuejs.org/api/directives.html#v-斗篷

Answer 2

面临同样的问题，并认为我们需要与v-capture相反。

<div v-if="false">Loading Vue....</div>

我知道这很晚了，但为像我这样可能需要解决方案的人添加。

从这条线上得到的。