As shown in the figure below, the route corresponding to the “Release Configuration” menu on the left is /release-config/index, when the page is refreshed on this path

The content (component) on the right is loadable.

But when you click on other menus on the left, such as “Message notification”, the content (component) on the right of the message notification cannot be loaded.

And click back to “release configuration” menu, the release configuration corresponding to the right content (component) can not be loaded.

You can see the following Vue WARN on the console:

Component inside <Transition> renders non-element root node that cannot be animated.

This WARN is because the component is not wrapped with a single node element.

Indeed, we use
in

:

<router-view v-slot="{ Component, route }">
  <transition name="zoom-fade" mode="out-in" appear>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>
Copy the code


and < Component > do not create real DOM elements. They are wrapped directly in < Transition >, which is our own component, which is passed to the IS property of < Component >.

The content component on the right of the problematic “Release Configuration” menu looks like this:

For convenience, I have folded the code so that the

can’t have multiple root elements, so there are two solutions,

  1. Do not use<transition>
  2. Wrap our components as a single root node

But I still want to use the animation from < Transition >, so I use method 2.

Finally, look again at the vue3 documentation about
:

<transition> serve as transition effects for single element/component. The <transition> only applies the transition behavior to the wrapped content inside;

can only be used on single elements/components.