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

Posted 2023-03-10

【中文标题】Vue 3 中的 s-s-r 和 keep-alive 问题：动态组件

【英文标题】：s-s-r and keep-alive issue in Vue 3: dynamic component

【发布时间】：2021-10-23 11:56:44

【问题描述】：

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

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

【参考方案1】：

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

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