嵌套路由

src/router/index.js

@@ -1,17 +1,24 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 import repeatWord from "@/components/RepeatWord.vue";
+import repeatMain from "@/views/repeat/RepeatMain.vue";
+import mainPage from "@/views/demodir/MainPage.vue";
 
 const routes = [
     {
-        path: '/',
-        name: 'home',
-        component: HomeView
+        path: "/",
+        component: repeatMain,
+        children: []
+    },
+    {
+        path: "/main",
+        component: mainPage,
+        children: []
+
     },
     {
         path: '/about',
         name: 'about',
-        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+        component: () => import(/* webpackChunkName: "about" */ '../views/repeat/AboutView.vue')
     }, {
         path: "/repeatword",
         component: repeatWord

src/views/demodir/HomeView.vue

@@ -0,0 +1,17 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    demo howmview
+  </div>
+</template>
+<script>
+export default {
+  name:"HomeView"
+}
+</script>
+<style scoped>
+
+</style>

src/views/demodir/MainPage.vue

@@ -0,0 +1,12 @@
+<script setup>
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+<script>
+export default {}
+</script>
+<style scoped>
+
+</style>

src/views/repeat/RepeatMain.vue

@@ -0,0 +1,23 @@
+<script setup>
+
+import SidebarView from "@/views/repeat/SidebarView.vue";
+import HeaderView from "@/views/repeat/HeaderView.vue";
+</script>
+
+<template>
+  <a-layout>
+    <a-layout-sider><sidebar-view></sidebar-view></a-layout-sider>
+    <a-layout>
+      <a-layout-header><header-view></header-view></a-layout-header>
+      <a-layout-content></a-layout-content>
+      <a-layout-footer>4</a-layout-footer>
+    </a-layout>
+  </a-layout>
+</template>
+<script>
+export default {}
+</script>
+
+<style scoped>
+
+</style>