From 05fbe8187ed7c18320c1cab16b5d3fe6c1b93609 Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 5 Jan 2025 18:14:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=90=8E=E5=8F=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vblog/web/README.md                           | 27 ++++++++
 vblog/web/src/router/index.js                 | 13 ++++
 vblog/web/src/views/backend/BackendLayout.vue | 67 +++++++++++++++++++
 vblog/web/src/views/backend/blog/ListPage.vue | 11 +++
 4 files changed, 118 insertions(+)
 create mode 100644 vblog/web/src/views/backend/BackendLayout.vue
 create mode 100644 vblog/web/src/views/backend/blog/ListPage.vue

diff --git a/vblog/web/README.md b/vblog/web/README.md
index 9d7a7fe..6e69ffe 100644
--- a/vblog/web/README.md
+++ b/vblog/web/README.md
@@ -295,3 +295,30 @@ client.interceptors.response.use(
   },
 )
 ```
+
+## 路由嵌套与布局
+
+https://router.vuejs.org/zh/guide/essentials/nested-routes.html
+
+```js
+const routes = [
+  {
+    path: '/user/:id',
+    component: User,
+    children: [
+      {
+        // 当 /user/:id/profile 匹配成功
+        // UserProfile 将被渲染到 User 的 <router-view> 内部
+        path: 'profile',
+        component: UserProfile,
+      },
+      {
+        // 当 /user/:id/posts 匹配成功
+        // UserPosts 将被渲染到 User 的 <router-view> 内部
+        path: 'posts',
+        component: UserPosts,
+      },
+    ],
+  },
+]
+```
diff --git a/vblog/web/src/router/index.js b/vblog/web/src/router/index.js
index 3119579..a2e6108 100644
--- a/vblog/web/src/router/index.js
+++ b/vblog/web/src/router/index.js
@@ -21,6 +21,19 @@ const router = createRouter({
       name: 'login',
       component: () => import('../views/common/LoginPage.vue'),
     },
+    // 后台管理
+    {
+      path: '/backend',
+      name: 'backend',
+      component: () => import('../views/backend/BackendLayout.vue'),
+      children: [
+        {
+          path: 'blog',
+          name: 'backend_blog_list',
+          component: () => import('../views/backend/blog/ListPage.vue'),
+        },
+      ],
+    },
   ],
 })
 
diff --git a/vblog/web/src/views/backend/BackendLayout.vue b/vblog/web/src/views/backend/BackendLayout.vue
new file mode 100644
index 0000000..473c2c7
--- /dev/null
+++ b/vblog/web/src/views/backend/BackendLayout.vue
@@ -0,0 +1,67 @@
+<template>
+  <a-layout class="layout">
+    <!-- 顶部导航 -->
+    <a-layout-header class="header">
+      <div>顶部导航</div>
+    </a-layout-header>
+    <a-layout class="body">
+      <!-- 侧边栏 -->
+      <a-layout-sider :width="260">
+        <a-menu>
+          <a-sub-menu key="1">
+            <template #title>
+              <span>
+                <IconCalendar />Navigation 1
+              </span>
+            </template>
+            <a-menu-item key="1_1">Menu 1</a-menu-item>
+            <a-menu-item key="1_2">Menu 2</a-menu-item>
+          </a-sub-menu>
+          <a-sub-menu key="2">
+            <template #title>
+              <span>
+                <IconCalendar />Navigation 2
+              </span>
+            </template>
+            <a-menu-item key="2_1">Menu 2.1</a-menu-item>
+            <a-menu-item key="2_2">Menu 2.2</a-menu-item>
+          </a-sub-menu>
+        </a-menu>
+      </a-layout-sider>
+      <!-- 内容区域 -->
+      <a-layout-content>
+        <RouterView></RouterView>
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="css" scoped>
+.layout {
+  height: 100%;
+}
+
+.header {
+  height: 60px;
+  box-sizing: border-box;
+  min-height: 60px;
+  max-height: 60px;
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-bg-2);
+}
+
+.body {
+  margin-top: 60px;
+}
+</style>
diff --git a/vblog/web/src/views/backend/blog/ListPage.vue b/vblog/web/src/views/backend/blog/ListPage.vue
new file mode 100644
index 0000000..43789dd
--- /dev/null
+++ b/vblog/web/src/views/backend/blog/ListPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div>
+    博客列表页面
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="css" scoped></style>