vue过渡动画跳转后没有内容渲染

vue报错如下：

这段代码源头是

<template>
  <div class="app-main">
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
</template>

将过渡动画放入到 <router-view>的标签中。这是官方提供的做法，但是当存在页面非元素根节点时，过渡动画无法加载，跳转后没有内容渲染出来

那么什么是非元素的根节点呢? non-element root node

具体代码如下，也是没有加载出内容的页面代码

<template>
  <div class="wrapper">
    <div class="box">
      <div class="image-box">
        <img src="../assets/pic/rocket.png" alt="#" />
      </div>
      <div class="text-box"><p>宇宙图片</p></div>
    </div>
  </div>
  
  <div class="wrapper">
    <div class="text-box"><p>这是一段文字</p></div>
  </div>
</template>

可以看到，一个 template 中有两个 div 作为根节点元素，就导致这个 template 无法作为根节点元素被加载出来

解决方法如下:

<template>
  <div>
    <div class="wrapper">
      <div class="box">
        <div class="image-box">
          <img src="../assets/pic/rocket.png" alt="#" />
        </div>
        <div class="text-box"><p>宇宙图片</p></div>
      </div>
    </div>
    <div class="wrapper">
      <div class="text-box"><p>这是一段文字</p></div>
    </div>
  </div>
</template>

在最外层加上一个 div, 让这个最外层的 div 把两个子元素 div 包裹起来，形成一个根元素，这样就可以了。。