Transition and conditionally KeepAlive can't work at the same time with a <div> as child component of Transition

[wtto00]

Reproduction

https://codesandbox.io/p/sandbox/nostalgic-bardeen-jvmjpv?file=%2Fsrc%2FApp.vue%3A30%2C38

Steps to reproduce the bug

  <!-- keep-alive doesn't work -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <div :key="route.fullPath" class="w-full h-full">
        <KeepAlive>
          <component
            :is="Component"
            v-if="route.meta.keepAlive"
            :key="route.fullPath"
          />
        </KeepAlive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
      </div>
    </Transition>
  </RouterView>

  <!-- remove key in div, keep-alive works, but transition doesn't work -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <div class="w-full h-full">
        <KeepAlive>
          <component
            :is="Component"
            v-if="route.meta.keepAlive"
            :key="route.fullPath"
          />
        </KeepAlive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
      </div>
    </Transition>
  </RouterView>

Because the <Transition> component must have only one child element, and my routing component contains multiple root elements, So i have to add a <div> element in <Transition> component.

I need the <keep-alive> condition to work, not all routed pages need to cache data.

Expected behavior

• <keep-alive> can take effect conditionally.
• <transition> works well.
• Allows my routing component to contain multiple root elements.

Actual behavior

<keep-alive> and <transition> cann't work at the same time.

Additional information

No response

[posva]

Transition needs single root components.
What you are looking for is the include or exclude prop of the KeepAlive component to filter components by name (not route names)

[wtto00]

Thanks for your answer.

I changed include prop for KeepAlive.

  <!-- keep-alive doesn't work -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <div :key="route.fullPath" class="w-full h-full">
        <KeepAlive :include="['A']">
          <component :is="Component" :key="route.fullPath" />
        </KeepAlive>
      </div>
    </Transition>
  </RouterView>

  <!-- page transition works as not expected -->
  <RouterView v-slot="{ Component, route }">
    <Transition name="fade">
      <KeepAlive :include="['A']">
        <component :is="Component" :key="route.fullPath" />
      </KeepAlive>
    </Transition>
  </RouterView>

So, i cannot use <transition> and multiple root elements at the same time?
Adding a <div> element is for single root components of <transition>, but in this case, <keep-alive> wouldn't work.

[posva]

Second version is correct. You need to ensure that your page components are single root in order to use transition

[wtto00]

I have some nested routes:

 {
    path: "/a",
    name: "a",
    component: () => import("../views/A.vue"),
    redirect: "/a/a1",
    children: [
      {
        path: "a1",
        component: () => import("../views/A1.vue"),
      },
      {
        path: "a2",
        component: () => import("../views/A2.vue"),
      },
    ],
  }

App.vue

  <RouterView v-slot="{ Component, route }">
    <Transition name="slide-right">
      <KeepAlive :include="['A1']">
        <component :is="Component" :key="route.fullPath" />
      </KeepAlive>
    </Transition>
  </RouterView>

A.vue

<router-view v-slot="{ Component, route }">
  <keep-alive :include="['A1']">
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
</router-view>

demo link

I only want to cache A1 pages, Is there any problem with the code above?
<keep-alive> doesn't works.

If i changed include prop to ['A1','A'] in App.vue, it would cache A1 and A2 pages. And the page switching animation will not have the expected transition

@posva Please help me look at this problem. Thanks ❤️ ❤️ ❤️

[posva]

the problem is that you would need to cache the parent too, in this case A

[wtto00]

If I modify the include property and add component A, the data caching component A will be fine, but the transition will not work correctly. This is not easy to solve.

In the example link above, I slow down the page switch animation and you can see that before switching to page a2, the a1 page has disappeared and there are two a2 pages doing the switch animation. @posva

[wtto00]

In the case of nested routes, keep-alive cannot cache a single component separately.

When caching the parent route A, switching from the child route A1 to A2 will cause the A1 page in the transition animation to immediately become the A2 page state, resulting in a transition animation between two A2 pages.

I have given up using keep-alive and switched to using pinia to manually cache data.

[ricardolenzi]

I was facing the same problem trying to implement the conditional route.meta.keepAlive and this was the solution I found:

<RouterView v-slot="{ Component, route }">
  <Transition name="page-slide" mode="out-in">
      <KeepAlive :include="route.meta.keepAlive ? Component.type.__name : null">
        <component :is="Component" :key="route.fullPath" />
      </KeepAlive>
  </Transition>
</RouterView>