默认插槽或命名插槽在 Vue 3 中的 "router-view" 上不起作用

Question

将 header 组件作为命名槽传递到 router-view。但是 router-view 并没有完全显示出来。通常这是在 vue 2 中工作的。但它不适用于 vue 3。是改变了还是现在做不到？

header分量

<template>
  <header id="g-header">
    <figure>
      <img id="logo"
           src="@/assets/images/logo.jpg"
           alt="The beautiful MDN logo.">
    </figure>
    <nav id="g-nav" class="flex justify-space-between">
      <a v-for="(link, idx) in links" :key="idx"
         class="flex justify-center align-center capitalize"
         :href="link.val">{{ link.text }}</a>
    </nav>
  </header>
</template>

router-view分量

<template>
  <div id="moduleA" class="modules">
    <router-view class="moduleA-children">
      <template #header>
        <app-header></app-header>
      </template>
    </router-view>
  </div>
</template>

children 查看组件

<template>
  <div id="step1">
    <slot name="header"></slot>
    <div class="row">the named slot OR default slot not showing</div>
  </div>
</template>

有没有办法做到这一点？或者我在这里遗漏了什么？

Answer 1

在 Vue Router 4 中，<router-view> 公开要呈现为 v-slot prop, named Component 的组件，它将与内置的 <component> 标签一起使用。您可以将任何插槽传递给该 <component> 标记内的组件：

<router-view v-slot="{ Component }">
  <component :is="Component">
    <template #header>
      <app-header></app-header>
    </template>
  </component>
</router-view>

demo

默认插槽或命名插槽在 Vue 3 中的 "router-view" 上不起作用

Default slot or named slot not working on "router-view" in Vue 3

vue.js

vue-router

vuejs3