加了一个导航栏

src/App.vue

@@ -1,8 +1,43 @@
+<script setup>
+import {ref} from "vue";
+
+const activeIndex = ref('1')
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+</script>
+
 <template>
+  <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+  >
+    <el-menu-item index="1">
+      <router-link to="/" class="no-underline">首页</router-link>
+    </el-menu-item>
+  </el-menu>
   <div>
     <router-view></router-view>
   </div>
 </template>
 
 <style scoped>
+.el-menu-demo {
+  width: 100%;
+  top: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: center; /* 中心对齐 */
+}
+
+.no-underline {
+  text-decoration: none;
+  color: inherit; /* 保持文字颜色与父元素一致 */
+}
+
+.el-menu-item .no-underline:hover {
+  color: #409EFF; /* 鼠标悬停时的颜色，可以根据需要调整 */
+}
 </style>