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>

传递 props 和插槽

我们可以利用其插槽给路由组件传递 props 或插槽：

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

模板引用

使用插槽可以让我们直接将模板引用放置在路由组件上：

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