vue3中使用transition以及keep-alive，切换页面白屏问题

vue3中使用transition以及keep-alive，切换页面白屏问题

一般layout页面如下

<template>
  <RouterView>
    <template #default="{ Component, route }">
      <transition
        :name="
          getTransitionName({
            route,
            openCache,
            enableTransition: getEnableTransition,
            cacheTabs: getCaches,
            def: getBasicTransition,
          })
        "
        mode="out-in"
        appear
      >
        <keep-alive v-if="openCache" :include="getCaches">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />
      </transition>
    </template>
  </RouterView>
</template>

我们假设其中一个页面为

<template>
    <div></div>
    <div></div>
</template>

你会发现跳转那个页面没事，但从这个页面跳转到其他页面就会出现白屏，原因如下

所以只需改为

<template>
    <div>
        <div></div>
        <div></div>
    </div> 
</template>

而网上的给RouterView加一个key，可能会对keep-alive造成影响