改进 布局

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <router-view />
+  <Default />
 </template>
 
 <script lang="ts" setup>
-  //
+  import Default from './layouts/default/Default.vue';
 </script>

src/layouts/default/AppBar.vue

@@ -16,6 +16,7 @@
         <v-list-item
           :prepend-icon="item.icon"
           :title="item.text"
+          :value="item.text"
           :to="item.to"
         ></v-list-item>
       </template>
@@ -45,9 +46,9 @@ const configStore = useConfigStore();
 const drawer = ref(false);
 
 const items = [
-  { icon: "mdi-contacts", text: "Contacts", to: "/" },
-  { icon: "mdi-history", text: "Frequently contacted", to: "/" },
-  { icon: "mdi-content-copy", text: "Duplicates", to: "/" },
+  { icon: "mdi-home", text: "首页", to: {name: "home"} },
+  { icon: "mdi-history", text: "Frequently contacted", to: "/documents" },
+  { icon: "mdi-content-copy", text: "login", to: "/auth/login" },
 ];
 
 </script>

src/router/index.ts

@@ -6,25 +6,24 @@ import { useConfigStore } from "@/store/config";
 const routes = [
   {
     path: "/",
-    component: () => import("@/layouts/default/Default.vue"),
-    children: [
-      {
-        path: "",
-        name: "Home",
-        meta: {
-          auth: true,
-        },
-        // route level code-splitting
-        // this generates a separate chunk (Home-[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import("@/views/Home.vue"),
-      },
-      {
-        path: "auth/login",
-        name: "Login",
-        component: () => import("@/views/auth/Login.vue"),
-      },
-    ],
+    name: "home",
+    meta: {
+      auth: true,
+    },
+    // route level code-splitting
+    // this generates a separate chunk (Home-[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import("@/views/Home.vue"),
+  },
+  {
+    path: "/auth/login",
+    name: "login",
+    component: () => import("@/views/auth/Login.vue"),
+  },
+  {
+    path: "/documents",
+    name: "documents",
+    component: () => import("@/views/documents/List.vue"),
   },
 ];
 

src/views/documents/List.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>a</div>
+</template>
+
+<script setup lang="ts"></script>