最近在学习vue3，在搭建项目的时候，使用 keep-alive 的包裹 router-view 会有警告信息
<router-view> can no longer be used directly inside <transition> or <keep-alive>
代码如下：
<transition
:name="!noTransition ? ‘fade-transform‘ : ‘‘"
:mode="!noTransition ? ‘out-in‘ : ‘‘"
>
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
提示以下警告
[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
从警告信息可以看出是路由包裹出现了问题，现做如下调整
<router-view :key="key" v-slot="{ Component }">
<transition
:name="!noTransition ? ‘fade-transform‘ : ‘‘"
:mode="!noTransition ? ‘out-in‘ : ‘‘"
>
<keep-alive :include="cachedViews">
<component :is="Component"></component>
</keep-alive>
</transition>
</router-view>
vue报错： <router-view> can no longer be used directly inside <transition> or <keep-alive>
原文：https://www.cnblogs.com/cap-rq/p/14869714.html