src/components/Menu.vue

@@ -128,6 +128,7 @@ export default defineComponent({
             name: string;
             route: string;
         }
+        // 左侧的列表数组
         const list: Array<MenuItem> = [
             {  
                 icon: "",
@@ -160,8 +161,13 @@ export default defineComponent({
                 route: ""
             }
         ]
+        // 当前选中的index
         const selnum = ref(0);
-        const routeto = (index: number) => {
+        /**
+         * 跳转路由与赋值对应的下标
+         * @param index 选中的下标 方便赋值与跳转
+         */
+        function routeto(index: number): void {
             console.log(index)
             selnum.value = index;
 

src/layout/mine.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="mine">
+        <NavTop style="flex-shrink:0"></NavTop>
+        <div class="body">
+            <Menu style="flex-shrink:0"></Menu>
+            <div class="container">
+                
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.mine{
+    display: flex;
+    flex-direction: column;
+    .body{
+        display: flex;
+        .container{
+            width: 100%;
+            background-color: #F5F5F5;
+            padding: 23rpx;
+        }
+    }
+}
+</style>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Menu from "@/components/Menu.vue";
+import NavTop from "@/components/NavTop.vue"
+
+export default defineComponent({
+    components:{
+        Menu,
+        NavTop
+    },
+    setup(){
+        console.log(1)
+    }
+})
+</script>

src/router/index.ts

@@ -1,10 +1,21 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: Array<RouteRecordRaw> = [
+  {
+    path:"/mine",
+    name:"Mine",
+    component: () => import("../layout/mine.vue"),
+    children: [
+      {
+        path:"Archives",
+        component: () => import("../views/mine/Archives.vue")
+      }
+    ]
+  },
   {
     path: '/',
     name: 'Home',
-    component: () => import(/* webpackChunkName: "about" */ '../components/Nav.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
   },
   {
     path: '/about',