vue報錯： can no longer be used directly inside or

最近在學習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>