昨天在工作时，发现一个很奇怪的问题。路由是动态生成的，且一切正常。但是当我跳转到某个页面之后再去切换路由，所有的路由页面都变成了空白，切换其他路由也是空白的。只有刷新页面之后是正常的，但是再次跳转到某个页面之后又会出现这样的情况。
vue-router4
因为项目使用了 transition 路由动画，实现方式是按照 vue-router4 官方推荐的写法：
<router-view v-slot="{ Component, route }" class="overflow-y-auto">
<transition name="fade-slide" mode="out-in" appear>
<component
:is="Component"
v-if="route.meta.ignoreCache"
:key="route.fullPath"
/>
<keep-alive v-else :include="cacheList">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition>
</router-view>出现问题的代码
一开始是没有问题的，因为这个项目是我搭建的一个admin框架给同事们用的，所以有的页面可能不需要，就会产生改动。
<template>
<div class="s-container flex">
<div class="left-side">
<div class="panel">
<Banner />
<DataPanel />
</div>
</div>
</div>
</template>最初的代码是上面的内容，这并不会引起我们所说的页面空白问题，但是这个页面不是每个项目都必须的页面，所以我的同事对它进行了如下改动：
<template>
<!-- <div class="s-container flex">
<div class="left-side">
<div class="panel">
<Banner />
<DataPanel />
</div>
</div>
</div> -->
<div>test</div>
</template>按照我们所想的，这样肯定是不会出现什么问题的，但就是这样一个小小的改动，引起了本文所说的问题，并且困扰了我一上午才找到原因
原因
由于我们使用 router-view 的时候，是用 transition 标签作为根节点进行包裹，并且当 template 标签的根部有注释代码的时候，html也会把注释的内容当成一个标签进行显示，所以 template 标签下就产生了两个根节点。
我们知道vue3中的template标签已经支持了多个根节点的设计，但是由于使用router-view的时候，是以transition标签作为根节点的，而transition标签内部只能有一个根节点，所以就导致了我们所描述的问题，让页面变成了空白，无法渲染。
总结
这其实是一个很让人无语的问题，一行小小的注释居然会引起路由页面空白。