diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/src/components/layout/Admin.vue b/src/components/layout/Admin.vue
new file mode 100644
index 0000000..0946fa2
--- /dev/null
+++ b/src/components/layout/Admin.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="layout">
+    <el-header>
+      <el-menu
+        :default-active="$route.path"
+        class="el-menu-demo"
+        mode="horizontal"
+        router
+      >
+        <el-menu-item index="/admin/">首页</el-menu-item>
+        <el-menu-item index="/admin/list">列表</el-menu-item>
+      </el-menu>
+    </el-header>
+    <el-main>
+      <router-view />
+    </el-main>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+}
+
+.el-header {
+  padding: 0;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.el-main {
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 01433bc..3e79677 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..4505cd6
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Admin from '@/components/layout/Admin.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Index',
+        component: () => import('@/views/Index.vue')
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/About.vue')
+    },
+    // admin 路由，访问 views/admin 目录下文件
+    {
+        path: '/admin',
+        component: Admin,
+        children: [
+            {
+                path: '',
+                name: 'AdminHome',
+                component: () => import('@/views/admin/Home.vue')
+            },
+            {
+                path: 'list',
+                name: 'AdminList',
+                component: () => import('@/views/admin/List.vue')
+            }
+        ]
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 0000000..468fcd9
--- /dev/null
+++ b/src/views/About.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="about">
+    <h1>关于页面</h1>
+    <p>这是一个使用 Vue Router 的关于页面</p>
+    <el-button @click="$router.push('/')">
+      返回首页
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.about {
+  padding: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Index.vue b/src/views/Index.vue
new file mode 100644
index 0000000..4d24e9a
--- /dev/null
+++ b/src/views/Index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="index">
+    <h1>首页</h1>
+    <p>欢迎使用 Element Plus + Vue 3 项目</p>
+    <el-button type="primary" @click="$router.push('/about')">
+      前往关于页面
+    </el-button>
+    <el-button type="primary" @click="$router.push('/admin/')">
+      前往管理
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.index {
+  padding: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/Home.vue b/src/views/admin/Home.vue
new file mode 100644
index 0000000..a2d10d5
--- /dev/null
+++ b/src/views/admin/Home.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="admin-home">
+    <h1>管理员首页</h1>
+    <p>欢迎来到管理员后台</p>
+    <el-button type="primary" @click="$router.push('/admin/list')">
+      查看列表
+    </el-button>
+    <el-button type="primary" @click="$router.push('/')">
+      首页
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.admin-home {
+  padding: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/List.vue b/src/views/admin/List.vue
new file mode 100644
index 0000000..7486d78
--- /dev/null
+++ b/src/views/admin/List.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="admin-list">
+    <h1>管理员列表</h1>
+    <p>这是管理员列表页面</p>
+    <el-button @click="$router.push('/admin')">
+      返回首页
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.admin-list {
+  padding: 20px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5b6a341..c838cb7 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
+import { resolve } from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -30,4 +31,9 @@ export default defineConfig({
       autoInstall: true,
     }),
   ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  }
 })