内部动态加载组件的vue3 suspense如何使用<keep-alive />?

Question

我正在尝试使用 Suspense 组件来显示我的应用程序中动态组件的加载状态。但是在这里我遇到了 keep-alive 和 Suspense 都需要在单个根节点上的场景。

              <keep-alive>
                <Suspense>
                  <component
                    ref="stepForm"
                    :id="currentTabComponent.id"
                    :key="currentTabComponent.id"
                    :is="currentTabComponent.value"
                    @success="handleSuccess"
                  ></component>
                  <template #fallback>
                    Loading...
                    <img src="@/assets/images/auth-decoration.png" />
                  </template>
                </Suspense>
              </keep-alive>

但是在下面的代码中，即使 Suspense 中只有一个根节点。它给了我这个错误。

[Vue warn]: <Suspense> slots expect a single root node.

我完全按照 vue 文档中所说的那样做。 有什么我想念的吗？我正在使用 Nuxt 3.2.3

Answer 1

我发现了问题。我愚蠢到无法弄清楚我在