refactor: change NavMenu

src/components/common/NavMenu.vue

@@ -4,11 +4,14 @@
   class="el-menu-demo"
   mode="horizontal"
   @select="handleSelect"
-  background-color="#545c64"
-  text-colr="#fff"
-  active-text-color="#ffd04b">
-  <el-menu-item v-for="(item, idx) in homeData" :key="item.title" :index="idx">
-    <router-link :to="item.path">{{item.title}}</router-link>
+  background-color="#f2f2f2"
+  text-colr="#000"
+  active-text-color="#31c27c">
+  <el-menu-item
+    v-for="(item, idx) in homeData" :key="item.title"
+    :index="idx.toString()"
+    @click="onClik(item.path)">
+    {{item.title}}
   </el-menu-item>
 
 </el-menu>
@@ -19,8 +22,8 @@
     name: 'NavMenu',
     data() {
       return {
-        activeIndex: '1',
-        activeIndex2: '1',
+        activeIndex: '0',
+        activeIndex2: '0',
         homeData:[
         {title: '首页', path: '/MusicLibrary/home'},
         {title: '歌手', path: '/MusicLibrary/songers'},
@@ -36,14 +39,15 @@
     methods: {
       handleSelect(key, keyPath) {
         console.log(key, keyPath);
-      }
+      },
+      onClik(path) {
+        this.$router.push(path)
+      },
     }
   }
 </script>
 
 <style lang="postcss" scoped>
-  a {
-    text-decoration: none;
-  }
+
 </style>