17.侧边栏和封装侧边栏组件

src/components/admin/home/HomeSide.vue

@@ -0,0 +1,27 @@
+<template>
+      <div class="side">
+        <el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
+          <el-sub-menu index="admin">
+            <template #title>
+              <el-icon><UserFilled /></el-icon> 管理员
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/admin/administrator/add">添加管理员</el-menu-item>
+              <el-menu-item index="/admin/administrator/list">管理员列表</el-menu-item>
+            </el-menu-item-group>
+          </el-sub-menu>
+
+          <el-menu-item index="/admin/category/list?parent_id=0">
+            <el-icon><Files /></el-icon> 类别管理
+          </el-menu-item>
+        </el-menu>
+
+      </div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/index.js

@@ -13,6 +13,24 @@ const routes= [
         path: "/admin", // http://localhost:5173/admin
         component: () => import("@/views/admin/home.vue"),
         meta: { requiresAuth: true }, //身份验证
+        children: [
+            //管理员
+            {
+                path: "administrator/add", // http://localhost:5173/admin/administrator/add
+                component: () => import("@/views/admin/administrator/add.vue")
+            },
+            {
+                path: "administrator/list", // http://localhost:5173/admin/administrator/list
+                component: () => import("@/views/admin/administrator/list.vue")
+            },
+
+            //类别管理
+            {
+                path: "category/list", // http://localhost:5173/admin/category/list
+                component: () => import("@/views/admin/category/list.vue")
+            },
+
+        ]
     }
 ]
 

src/views/admin/administrator/add.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    添加管理员
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/administrator/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    管理员列表
+
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/category/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    类别管理页面
+
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/home.vue

@@ -1,5 +1,6 @@
 <script setup>
 import '@/assets/admin/css/home.css' //导入央视
+import HomeSide from "@/components/admin/home/HomeSide.vue";
 
 </script>
 
@@ -8,13 +9,12 @@ import '@/assets/admin/css/home.css' //导入央视
     <div class="header">
 
     </div>
-    <div class="main">
-      <div class="side">
 
-      </div>
+    <div class="main">
+      <HomeSide />
 
       <div class="content">
-
+        <router-view />
       </div>
     </div>
   </div>