Vue Router RouterView 插槽

RouterView 组件暴露了一个插槽，可以用来渲染路由组件。

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

这等同于不带插槽的 <RouterView />。

配合 KeepAlive 和 Transition 组件使用

<RouterView v-slot="{ Component }">
    <KeepAlive>
        <component :is="Component" />
    </KeepAlive>
</RouterView>

<RouterView v-slot="{ Component }">
    <Transition>
        <component :is="Component" />
    </Transition>
</RouterView>

<RouterView v-slot="{ Component }">
    <Transition>
        <KeepAlive>
            <component :is="Component" />
        </KeepAlive>
    </Transition>
</RouterView>

模板引用

使用插槽可以直接将模板引用放置到路由组件上。

<RouterView v-slot="{ Component }">
    <component :is="Component" ref="routerViewRef" />
</RouterView>