添加 div with:key 时 Keep alive 停止工作

Question

我目前面临一个问题，即<keep-alive>在将:key添加到父<div>后停止工作。 这个<div>和:key是必需的，否则<transition>将不起作用。 有人对此有解决方案吗？ 抱歉，我无法提供更多代码。

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

Answer 1

看起来即使将您的组件单独放在一个div中也会阻止转换。

即使我不使用<keep-alive>和:key ，我在div中的测试应用程序组件也没有进行任何转换。

为什么需要将其包装在div中？

它不应该这样工作吗？

<transition :name="transitionName">
   <keep-alive include="SpecialComponent">
      <component :is="Component" :key="route.name" />
    </keep-alive>
</transition>