Vue3实战笔记（65）—记录本项目浪费不少时间求证的问题

---

前言

笔记最重要的作用就是温故而知新，最近遇到不少问题都是曾经遇到的，知道就是想不起来，查查自己的笔记都轻松解决了，老怀甚慰，深刻的意识到及时记录问题的重要性，今天记录几个最近遇到的几个看似简单解决起来却比较耗时的问题。

---

一、多个根问题

1、多个router-view之间切换，我从子路由切换到其他的router-view，路由过去了，界面没反应。尝试了很多方案，甚至使用router-view命名方式，也没有解决。

解决方案：

最外层router-view 使用了过渡动画，导致的这个问题的原因是：

runtime-core.esm-bundler.js:39 [Vue warn]: Component inside renders non-element root node that cannot be animated.

    <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
          <component :is="Component" />
      </transition>
    </router-view>

这个问题很恶心，如果子组件有多个根节点上述写法就会报错，如果组件没有多个根还不报警告，为了不一一更改多个组件，改善一下，加个div

  <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div >
          <component :is="Component" />
        </div>
      </transition>
    </router-view>

二、动画失效

上一个问题解决了，但是这样改有时候动画会失效，更恶心的还会出现动画弹出来了，内容没了。解决方案需要加个key，transition会根据是key的变化判断元素改变，
触发动画：

 <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div :key="$route.path">
          <component :is="Component" />
        </div>
      </transition>
    </router-view>

三、首次加载动画效果不生效，不同router-view之间切换无动画效。

解决方案：增加首次加载动画生效属性appear

 <router-view  v-slot="{ Component }">
       <transition name="bounce" mode="out-in" >
        <div :key="$route.path">
          <component :is="Component" appear />
        </div>
      </transition>
    </router-view>

---

总结

这几个问题看似简单却无迹可寻，网上和官网找不到很直接的答案，都是一步步断点，看源码，分析原理思考各种可能性，慢慢探索解决。学习技术不能不求甚解，拿来主义，复制过来或者看看文档的用法，很多问题是自己解决不掉的。一入动画深似海。。。这几个问题看似简单却无迹可寻，网上和官网找不到很直接的答案，都是一步步断点，看源码，分析原理思考各种可能性，慢慢探索解决。学习技术不能不求甚解，拿来主义，复制过来或者看看文档的用法，很多问题是自己解决不掉的。一入动画深似海。。。

不忧过往，不惧未来，把握今朝，心怀宇宙浩渺。不忧过往，不惧未来，把握今朝，心怀宇宙浩渺。