vue中＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞

问题：如描述所说

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead

就是vue-router不再使用原来的写法，用slot插槽代替

原因：

检查vue-router的版本一般是4.x以上的都改用了新的写法

解决：

改成：

<router-view v-slot="{ Component }">
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="isCached">
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

原写法：

<section class="app-main">
    <transition
      name="fade-transform"
      mode="out-in"
    >
      <keep-alive :include="isCached">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>