vue3 router-view keep-alive Suspense transition 共同使用

需要使用路由 router-view
同时需要根据条件缓存页面
避免组件加载慢使用suspense
添加动画transition提升用户体验

官网代码段

<router-view v-slot="{ Component }">
  <template v-if="Component">
    <transition mode="out-in">
      <keep-alive>
        <suspense>
          <component :is="Component"></component>
          <template #fallback>
            <div>
              Loading...
            </div>
          </template>
        </suspense>
      </keep-alive>
    </transition>
  </template>
</router-view>

按照官方代码段写 在快速操作时会报错
Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

百度后没找到相关的解决方式

之后自己调整结构后 即使快速操作也不会报错

  <router-view v-slot="{ Component }">
    <template v-if="Component">
      <keep-alive>
        <Suspense>
          <transition name="fade-transform" mode="out-in">
            <template #default>
              <component :is="Component"></component>
            </template>
            <template #fallback> loading... </template>
          </transition>
        </Suspense>
      </keep-alive>
    </template>
  </router-view>

还没有测试相关功能是不是完善 只是动画没有报错了
Suspense 功能不知道有没有实现