RouterView 插槽

RouterView 组件公开了一个插槽，可用于渲染路由组件

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

上面的代码等同于使用 <router-view /> 而不使用插槽，但当我们想要使用其他功能时，插槽提供了额外的灵活性。

KeepAlive 和 Transition

在使用 KeepAlive 组件时，我们通常希望它保持路由组件的活动状态，而不是 RouterView 本身。我们可以通过将 KeepAlive 放置在插槽内来实现这一点

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

类似地，插槽允许我们使用 Transition 组件在路由组件之间进行过渡

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

我们也可以在 Transition 内使用 KeepAlive

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

有关将 RouterView 与 Transition 组件一起使用的更多信息，请参阅 过渡 指南。

传递 props 和插槽

我们可以使用插槽向路由组件传递 props 或插槽

<router-view v-slot="{ Component }">
  <component :is="Component" some-prop="a value">
    <p>Some slotted content</p>
  </component>
</router-view>

实际上，这通常不是我们想要做的事情，因为路由组件都需要使用相同的 props 和插槽。有关传递 props 的其他方法，请参阅 向路由组件传递 props。

模板引用

使用插槽允许我们直接在路由组件上放置一个 模板引用

<router-view v-slot="{ Component }">
  <component :is="Component" ref="mainContent" />
</router-view>

如果我们改为将引用放在 <router-view> 上，则引用将填充 RouterView 实例，而不是路由组件。