thumbnail
昨天在工作时，发现一个很奇怪的问题。路由是动态生成的，且一切正常。但是当我跳转到某个页面之后再去切换路由，所有的路由页面都变成了空白，切换其他路由也是空白的。只有刷新页面之后是正常的，但是再次跳转到某个页面之后又会出现这样的情况。
SCOTT STUDIO

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标签内部只能有一个根节点，所以就导致了我们所描述的问题，让页面变成了空白，无法渲染。

总结

这其实是一个很让人无语的问题，一行小小的注释居然会引起路由页面空白。

最后～如果本文对你有所帮助，可以点个赞或者请我喝杯奶茶~万分感谢🎉🎉🎉