添加带:key的父div后<keep-alive>失效，需兼顾<transition>功能求解决

问题核心是你把:key绑定在了<keep-alive>的父级<div>上——每次路由切换时，这个<div>会被完全销毁并重新创建，导致内部的<keep-alive>组件也跟着重新实例化，之前缓存的组件实例全部丢失，自然失去了缓存效果。

要同时满足<transition>的过渡需求和<keep-alive>的缓存功能，可以调整结构，把:key绑定到<component>上，让<keep-alive>成为<transition>的直接子元素：

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="transitionName">
      <keep-alive include="SpecialComponent">
        <component :is="Component" :key="route.name" />
      </keep-alive>
    </transition>
  </router-view>
</template>

如果你的组件必须用<div>包裹（比如组件没有根节点），可以把<div>放在<keep-alive>内部、<component>外部，同时确保<keep-alive>不会被频繁重建：

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="transitionName">
      <keep-alive include="SpecialComponent">
        <div>
          <component :is="Component" :key="route.name" />
        </div>
      </keep-alive>
    </transition>
  </router-view>
</template>

这样调整后：

• <transition>能通过<component>的:key识别路由变化，正常触发过渡动画
• <keep-alive>的实例不会随路由切换被销毁，能持续缓存符合include规则的组件

如果你的路由带参数，也可以把:key的值换成route.fullPath，适配参数变化时的过渡需求。

内容的提问来源于stack exchange，提问作者MrSpt