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;
}
效果(可以根据自己需求修改动画即可,当前展示的这个效果是二级路由的切换过渡):