DEV Community

Mesak
Mesak

Posted on

Vue Transitions can't use for nested routes's KeepAlive

The following scenario is what I encountered while using the soybean-admin frontend UI framework.

When using nested routes, the KeepAlive component caches routed elements. However, when reusing them, the transition animation component cannot place the elements.

This issue arises because the frontend UI framework automatically retains components of the secondary menu, leading to this problem. I am not certain whether the root cause is the KeepAlive or the Transition component, but in any case, excluding components with nested routes from entering the cache can resolve this problem.

The following is the original code where the problem occurred
soybean-admin/blob/v0.10.3

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay