问题复现
<router-view v-slot="{ Component, route }"><transition name="fade" mode="out-in"><keep-alive><component :is="Component" :key="route.path" /></keep-alive></transition></router-view>
子组件A
<template><div><div class="zhangsan text-3xl font-bold underline w-20 h-20 bg-red-600 !text-gray-500">nihao </div><div><div style="font-size: 20px"><!-- 由于SVG图标默认不携带任何属性 --><!-- 你需要直接提供它们 --><Edit style="width: 1em; height: 1em; margin-right: 8px" /><Share style="width: 1em; height: 1em; margin-right: 8px" /><Delete style="width: 1em; height: 1em; margin-right: 8px" /><Search style="width: 1em; height: 1em; margin-right: 8px" /></div><el-icon class="is-loading"><Loading /></el-icon></div></div><!-- <el-table-v2 :columns="columns" :data="data" :width="700" :height="400" fixed /> -->
</template>
问题
路由跳转时,从A组件跳转到其他组件之后所有的组件都不能渲染
排查原因
因transition组件只有能有个根标签,哪怕是注释也不行!!!!