1

I am currently facing an issue where the <keep-alive> stops working after adding a :key to the parent <div>. This <div> and also the :key is needed, otherwise the <transition> won't work. Anyone got a solution for that? Sorry i am not able to provide more code.

<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>
MrSpt
  • 499
  • 3
  • 16

1 Answers1

0

It looks like even putting you component in a div alone prevents transitions.

My test app components inside a div didn't do any transitions even if I don't use <keep-alive> and :key.

Why do you need to wrap it in a div?

Shouldn't it work so?

<transition :name="transitionName">
   <keep-alive include="SpecialComponent">
      <component :is="Component" :key="route.name" />
    </keep-alive>
</transition>
Tolbxela
  • 4,767
  • 3
  • 21
  • 42