Vue3 Composition API：错误：element/if/for 节点缺少 Codegen 节点。在路由器视图中使用命名槽时，首先应用适当的转换

Question

我目前正在所有应用程序中重写 Vue 代码，但遇到了一个相当烦人的错误，我似乎无法破译。让我先向你解释一下我想做什么。

假设我有一个全局页面组件，具有以下命名槽：

<div class="page">
     <slot name="header" />
        
     <slot name="content" />

     <slot name="sidebar" />
</div>

在我使用此组件的应用程序之一中，我希望所有页面都具有相同的标题，但内容和侧边栏不同。我在我的 app.js 中尝试了以下操作：

<template>
    <Page>
        <template #header>
            my header HTML blablabla
        </template>

        <router-view></router-view>
    </Page>
</template>

然后在我的其中一页中添加以下内容：

<template>
   <template #content>
      my main content blablabla...
   </template>

   <template #sidebar>
      My sidebar content blablabla...
   </template>
</template>

但是保存此代码会在编译器中出现错误：

• 错误：element/if/for 节点缺少 Codegen 节点。首先应用适当的变换。

这似乎与我以 Vue 不喜欢的方式使用大量模板标签有关。但我不知道我能做些什么来解决这个问题。这就是为什么我在这里提出这个问题。谁能帮我解决这个问题吗？预先感谢！

Answer 1

1. 您需要默认插槽：

<div class="page">
     <slot name="header" />
        
     <slot name="content" />

     <slot name="sidebar" />

     <slot/>
</div>

在这种情况下，

router-view

组件将在默认插槽内渲染。如果你想渲染

content

和

sidebar

插槽内的

router-view

（位于

default

插槽内） - 你不想让它工作。

你需要想出别的办法