补充后台页面

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,
+      },
+    ],
+  },
+]
+```

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'),
+        },
+      ],
+    },
   ],
 })
 

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>

vblog/web/src/views/backend/blog/ListPage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    博客列表页面
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="css" scoped></style>