[Vue Router warn]: ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.

Vue Router 发出这个警告是因为在 Vue Router 3.5 版本之后，不推荐直接在 <transition> 或 <keep-alive> 组件内使用 <router-view>。

以前的写法：

  <keep-alive>
    <router-view />
  </keep-alive>

更新后写法：

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

对于transition也是同样的写法：

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

顺带在这个基础上分享一个路由切换的过渡效果（仅需在以上代码中加入如下css）：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

效果（可以根据自己需求修改动画即可，当前展示的这个效果是二级路由的切换过渡）：