项目使用的是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

--

再问个题外话,这里提问题时代码片段 怎么插入呢?