改进 布局

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-home", text: "首页", to: {name: "home"} },
-  { icon: "mdi-history", text: "Frequently contacted", to: "/" },
+  { icon: "mdi-history", text: "Frequently contacted", to: "/documents" },
-  { icon: "mdi-content-copy", text: "Duplicates", to: "/" },
+  { icon: "mdi-content-copy", text: "login", to: "/auth/login" },
 ];
 
 </script>

src/router/index.ts

@@ -6,11 +6,7 @@ import { useConfigStore } from "@/store/config";
 const routes = [
   {
     path: "/",
-    component: () => import("@/layouts/default/Default.vue"),
+    name: "home",
-    children: [
-      {
-        path: "",
-        name: "Home",
     meta: {
       auth: true,
     },
@@ -20,11 +16,14 @@ const routes = [
     component: () => import("@/views/Home.vue"),
   },
   {
-        path: "auth/login",
+    path: "/auth/login",
-        name: "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>