vue报错： <router-view> can no longer be used directly inside <transition> or <keep-alive>

最近在学习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>