侧边栏图标修改

src/layout/Sidebar.vue

@@ -10,12 +10,13 @@
       router
       mode="vertical"
       :unique-opened="true"
+      @select="handleMenuSelect"
     >
       <template v-for="(menu, index) in menus" >
         <el-submenu :index="menu.path" v-if="menu.submenus != null" :key="menu.path">
           <template slot="title">
-            <el-avatar :src="menu.url" :size="25" shape="square" style="background-color: transparent;margin-right: 12px" ></el-avatar>
-            <span>{{ menu.name }}</span>
+            <el-avatar :src="activeIndex.indexOf(menu.path)<0?require('@/assets/menu/'+menu.url):require('@/assets/menu/active/'+menu.url)" :size="23" shape="square" style="background-color: transparent;margin-right: 12px" ></el-avatar>
+            <span >{{ menu.name }}</span>
           </template>
           <el-menu-item
               v-for="submenu in menu.submenus"
@@ -30,7 +31,7 @@
             :key="menu.path"
             :index="menu.path"
         >
-          <el-avatar :src="menu.url" :size="25" shape="square" style="background-color: transparent;margin-right: 6px" ></el-avatar>
+          <el-avatar :src="activeIndex.indexOf(menu.path)<0?require('@/assets/menu/'+menu.url):require('@/assets/menu/active/'+menu.url)" :size="23" shape="square" style="background-color: transparent;margin-right: 12px" ></el-avatar>
           <span slot="title">
           {{ menu.name }}
         </span>
@@ -47,10 +48,12 @@ export default {
   },
   data() {
     return {
+      activeIndex: '/home/user',
       menus: [
         {
-          url: require("@/assets/menu/userManagement@3x.png"),
+          url: '1.png',
           name: "用户管理",
+          path: "/home/user",
           submenus: [
             {
               name: "人员管理",
@@ -63,12 +66,12 @@ export default {
           ],
         },
         {
-          url: require("@/assets/menu/roleManagement@3x.png"),
+          url: '3.png',
           name: "角色管理",
           path: "/home/role",
         },
         {
-          url: require("@/assets/menu/systemConfiguration@3x.png"),
+          url: '4.png',
           name: "系统配置",
           path: "/home/system",
           submenus: [
@@ -91,7 +94,7 @@ export default {
           ],
         },
         {
-          url: require("@/assets/menu/deviceManagement@3x.png"),
+          url: '5.png',
           name: "设备管理",
           path: "/home/device",
           submenus: [
@@ -106,7 +109,7 @@ export default {
           ],
         },
         {
-          url: require("@/assets/menu/dataManagement@3x.png"),
+          url: '6.png',
           name: "数据管理",
           path: "/home/data",
           submenus: [
@@ -125,12 +128,12 @@ export default {
           ],
         },
         {
-          url: require("@/assets/menu/serviceManagement@3x.png"),
+          url: '7.png',
           name: "服务管理",
           path: "/home/service",
         },
         {
-          url: require("@/assets/menu/securityManagement@3x.png"),
+          url: '8.png',
           name: "安全管理",
           path: "/home/security",
           submenus: [
@@ -147,6 +150,14 @@ export default {
       ],
     };
   },
+  mounted() {
+    this.activeIndex = this.$route.path
+  },
+  methods: {
+    handleMenuSelect(index, indexPath) {
+      this.activeIndex = index;
+    }
+  }
 };
 </script>