Vue首页子路由中内容重复？

项目使用的是vue3,是个简单的学习demo
路由配置如下

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [{
      path: '',
      component: Main,
      name: 'main'
    }]
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];
 

main.vue

<template>
  <div id="fdfs">
    <div class="list">
      <MainListWrapper />
    </div>
    <div class="sidebar">
      <MainSideBar />
    </div>
  </div>
</template>
<script>
import MainListWrapper from "@/components/MainListWrapper.vue";
import MainSideBar from "@/components/MainSideBar.vue";
export default {
  name: 'Main',
  components: {
    MainListWrapper,
    MainSideBar
  }
};
</script>
 

然后问题就出现了，如题所述

这是我项目:链接: https://pan.baidu.com/s/1qReGf3Vizzm8UPHtt_3hig 提取码: nw5k

你header组件里面也写 router-view 当然会俩个啊

第七行 path: '' ？？？
这样的话，当实际的路径为/ 不就匹配上了，直接就渲染了
你这问题也没有描述清除，是组件重复渲染了么？