quasar使用keep alive警告 Component inside ＜Transition＞ renders non-element root node

问题描述

提示：这里描述具体问题：在项目中使用缓存来保持页面不被更新，但是在使用keep-alive时会给出警告。vue3缓存与vue2缓存不一样，需要注意。下面是代码。

      <router-view v-slot="{ Component }">
        <transition>
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
      <!-- <router-view /> -->

然后浏览器给出如下警告：

runtime-core.esm-bundler.js?9e79:38 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <Tuning onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <KeepAlive> 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition> 
  at <RouterView> 
  at <QPageContainer> 
  at <QLayout view="lHh Lpr lFf" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

---

原因分析：

提示：这里填写问题的分析：由于:is="Component"属性会使所有的组件都渲染在这里，而外层是transition 虚拟组件，也就是说所有组件都会包裹在它里面，这是不允许的。

---

解决方案：

提示：这里填写该问题的具体解决方案：把组件都包裹成单root节点，加一个div标签，把Component包裹一下，就可以了。

      <router-view v-slot="{ Component }">
        <transition>
          <keep-alive>
            <div>
              <component :is="Component" />
            </div>
          </keep-alive>
        </transition>
      </router-view>
      <!-- <router-view /> -->

---

欢迎评论：

提示：欢迎大家在评论区讨论相关问题。
可以关注博主，我会持续更新工作中遇到的技术小砖头，供大家使用。
也可以在评论区告知好的小砖头或技术，我会收录。
还可以指出本博文错误，希望大家不吝赐教。