vue3.0+ 全家桶使用中需要注意的细节（个人笔记）1.keep-alive 与 transition 在与vue-r

1.keep-alive 与 transition

在与vue-router 4.x配合使用过程中，语法与vue2.0+有一些区别，详情请参考官方文档，以下是官方示例：

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

注意： vue3.0+不要求组件template拥有唯一的根元素(root element), 但在实际使用中发现，一旦使用<transition>，页面组件必须拥有唯一的根元素，且<template>与根组件模板语法之间不可以存在任何注释，否则可能会导致页面路由跳转时白屏，即transition作用到了注释节点，页面内容渲染异常

解决方案：

当keep-alive不存在时,可以在component外层包裹一个根元素，并给予key,例如：

<router-view v-slot="{ component }">
  <transition>
    <div :key="$route.path"> // root element
        <component :is="Component" />
    </div>
  </transition>
</router-view>

当需要<keep-alive>时，当前方式不适用，key会导致component每次都会被重新加载

需要<keep-alive>时（目前为止发现）只能手动给每个页面组件添加根元素

常见的控制台报错及其原因：

缺失根元素

[Vue warn]: Component inside renders non-element root node that cannot be animated.

使用了旧版本的语法

[Vue Router warn]: can no longer be used directly inside or .