526互联

vue3 中使用 transition的问题

发布时间 2023-03-29 15:05:33作者: 咸鱼也要有理想

问题：在路由中添加动画效果但是，当切换路由时，页面一片空白，这个问题困扰了我几天了，今天终于发现了它的问题，特来记录一下，以便参考

首先有这么一段代码

想在vue的路由跳转里面加入动画效果，于是便这样写

// 提示： name="fade-transform"  fade-transform是css类名，必须要写的
<el-main>
    <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>
  </el-main>

这么写看着是没有什么问题，而且控制台也不会报错，但是当你切换路由的时候这个问题就显现出来的

解释：

  1. 首先你要知道的是 transition 是只支持一个单标签
  2. 如果你写过vue2，那么你一定记得，在vue2中写 .vue文件时，是只能有一个根元素<tamplate><div></div></template>，那么你这样写是没有问题的
  3. 但是如果你写的vue3，那么你一定知道，vue3在 .vue文件中是支持多个根元素的
  4. 所以，但你这么来写时，再结合上面 的第一句话，你就能理解为什么会出现这个问题了

结论

更改现在的 .vue文件，全都改成单标签

发现和解决问题是真的爽啊，欢迎大家讨论，哈哈~