問題復現
<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組件只有能有個根標簽,哪怕是注釋也不行!!!!