From 90888dcf7b9c6900c1608ea55ef25aabf49921c1 Mon Sep 17 00:00:00 2001
From: weixin_39458544 <weixin_39458544@devide>
Date: Fri, 15 Sep 2023 03:01:00 +0800
Subject: [PATCH] Fri Sep 15 03:01:00 CST 2023 inscode

---
 src/App.vue            |  7 +++++--
 src/layout/MHeader.vue | 39 +++++++++++++++++++++++++++------------
 src/router/index.js    |  4 +++-
 src/views/about.vue    |  6 ++++++
 4 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 src/views/about.vue

diff --git a/src/App.vue b/src/App.vue
index 1281f11..255fe96 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 3964742..5966ee1 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 c0bd3c2..570f9b5 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 0000000..71936d3
--- /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
-- 
GitLab