Fri Sep 15 03:01:00 CST 2023 inscode

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>

src/layout/MHeader.vue

 <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

src/router/index.js

 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 = [

src/views/about.vue

+<template>
+    <div>关于我们</div>
+</template>
+<script setup>
+console.log('home')
+</script>
\ No newline at end of file