Vue 3 中的 SSR 和 keep-alive 问题：动态组件

Question

<template>
      <div class="default-layout">
          <router-view v-slot="{ index }">
            <keep-alive>
              <component :is="index" :key="route.fullPath" />
            </keep-alive>
          </router-view> 
      </div>
</template>
    
<script lang="ts">
    import { defineComponent} from "vue";
    import { useRoute } from "vue-router";
    import Index from "@/pages/index";
    
    export default defineComponent({
      name: "app",
      components: {
        Index,
      },
      setup: () => {
        const route = useRoute();
       
        return { route, index: Index };
      },
    });

</script>

渲染时会报错：

[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Comment) 
- Server rendered DOM: <!--[--> (start of fragment) 
  at <KeepAlive> 
  at <RouterView key=0 > 
  at <App>

Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. 

Hydration completed but contains mismatches.

我应该怎么做才能解决这个问题？

Answer 1

我相信这是一个错误。你可以关注https://github.com/vuejs/vue-next/issues/4817

在撰写本文时，Vue 维护人员尚未确认。