vue3 RouterLink路由跳转后RouterView组件未加载，页面未显示，且控制台无任何报错

在使用 vue3 开发项目过程中，组件之间使用 router-link 跳转，但是当我开发的组件跳转到其他组件时，其他组件的页面未加载，再跳转回自己的组件时，自己的组件也加载不出来了，浏览器刷新后页面可以加载出来。但是初始页面如果是其他组件，进行路由跳转就没有这个问题。

当我打开控制台查看页面时，发现页面未加载是因为 RouterView 组件未加载，如下图：

代码为：

在排除了路由逻辑以及没有其他任何页面报错的情况下，我蒙了。经多方搜索，然后终于让我找到了解决方法。
搜索得到的解决办法URL
原来是我的 index.vue 页面下的根元素有两个，而 transition 组件包裹下的组件中只能有一个根元素。

于是修改代码：

注意：即便是被注释的代码，template 下也只能有一个根元素。