vue 页面跳转路由 不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.

显示信息：

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

 原因：

        warn是因为组件中包裹的不是一个单节点元素。

<template>
  <a-layout-content class="vab-content">
    <router-view v-slot="{ Component }">
      <transition mode="out-in" name="fade-transform">
        <keep-alive>
        
            <component :is="Component" />

        </keep-alive>
      </transition>
    </router-view>
  </a-layout-content>
</template>

<keep-alive>、<component>都不会创建真实的DOM元素，直接包裹在<transition>中的，就是我们自己写的组件，也就是传给<component>的is属性的Component

解决方法：

 

1. 不使用<transition>

<template>
  <a-layout-content class="vab-content">
    <router-view v-slot="{ Component }">
      
        <keep-alive>
          <div>
            <component :is="Component" />
          </div>
        </keep-alive>

    </router-view>
  </a-layout-content>
</template>

1. 把我们的组件都包裹成单root节点

<template>
  <a-layout-content class="vab-content">
    <router-view v-slot="{ Component }">
      <transition mode="out-in" name="fade-transform">
        <keep-alive>
          <div>
            <component :is="Component" />
          </div>
        </keep-alive>
      </transition>
    </router-view>
  </a-layout-content>
</template>