Vue3 - 解决报错警告 ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.Use s

前言

关于此问题网上的教程都无法解决，如果您的报错信息与我相似，即可解决。

在 vue3 开发中，详解报错警告：[Vue Router warn]: <router-view can no longer be used directly inside <transition or <keep-alive. Use slot props instead: x，很恶心的错误，该报错中提到了 router-view视图、keep-alive缓存、transition过渡动画组件、插槽slot等，具体是哪里的问题很难排查，本文提供详细解决办法。

---

如下图所示，只要报错差不多就能 100% 完美解决。

详细示例解决方法，保证搞定。

解决方案

按照下方错误分析说明及示例代码，轻松搞定此问题。