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>

It will lead to an error while rendering:

[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.

What shall I do to fix this issue?

Answer 1

I believe this is a bug. You can follow it at https://github.com/vuejs/vue-next/issues/4817

At the time of this writing, it was not yet confirmed by Vue maintainers.