diff --git a/src/App.vue b/src/App.vue
index 1281f11cd43a716c8288eeec78e09e3e319774f3..255fe962e3c66c500fa3622b9bf62b7efe373b16 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,9 @@ import TheWelcome from './components/TheWelcome.vue'
   <router-view></router-view>
 </template>
 
-<style scoped>
-
+<style>
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/src/layout/MHeader.vue b/src/layout/MHeader.vue
index 396474254f4d08182d4b3da433456625e081cf05..5966ee1a89d2fb152379329c5ceff3e96dd790b0 100644
--- a/src/layout/MHeader.vue
+++ b/src/layout/MHeader.vue
@@ -1,21 +1,36 @@
 <template>
     <header>
         <ul class="__nav">
-            <li v-for="item in menus" :key="'menu_' + item.name">{{ item.name }}</li>
+            <li @click="handleMenu(item)" v-for="item in menus" :key="'menu_' + item.name">{{ item.name }}</li>
         </ul>
     </header>
 </template>
 <script setup>
-    const menus = [
-        { name: '首页', path: '/' },
-        { name: '关于我们', path: '/about' }
-    ]
-    
+import { useRouter } from 'vue-router';
+const menus = [
+    { name: '首页', path: '/' },
+    { name: '关于我们', path: '/about' }
+]
+
+const router = useRouter()
+const handleMenu = (item) => {
+    router.push({
+        path: item.path
+    })
+}
 </script>
-<style lang="stylus">
-.__nav{
-    li{
-        list-style none;
-    }
+<style scoped>
+.__nav {
+    display: flex;
+}
+
+.__nav li {
+    list-style: none;
+    padding: 10px 20px;
+    cursor: pointer;
 }
-</style>
\ No newline at end of file
+
+.__nav li:hover {
+    background-color: #177fff;
+    color: #fff;
+}</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c0bd3c25bfee5759320e2a17df162d607b2e3f90..570f9b524f72dd66efff69b618379f0fd647705d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,9 +1,11 @@
 import {createRouter, createWebHashHistory} from 'vue-router'
 import layout from '../layout/index.vue'
 import home from '../views/home.vue'
+import about from '../views/about.vue'
 
 const subRouter = [
-    {path: '/', component: home}
+    {path: '/', component: home},
+    {path: '/about', component: about}
 ]
 
 const routes = [
diff --git a/src/views/about.vue b/src/views/about.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71936d3347c58bf8d361eb92329c38c87ee983f1
--- /dev/null
+++ b/src/views/about.vue
@@ -0,0 +1,6 @@
+<template>
+    <div>关于我们</div>
+</template>
+<script setup>
+console.log('home')
+</script>
\ No newline at end of file