添加 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>