切換路由時更換成當前路由圖標

<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="white"
      text-color="#A0A0A0"
      active-text-color="#32b16c"
      unique-opened
      router
    >
      <!-- system -->
      <div class="logo">
        <img src="../assets/images/logo.png" alt="logo" />
      </div>
      <div class="user">
        <div><img src="../assets/images/user.png" alt="user" /></div>
      </div>

      <template v-for="item in items">
        <template v-if="!item.route_only">
          <el-menu-item :index="item.index" :key="item.index">
            <img :class="'hide_' + item.index" :src="item.icon" alt="icon" />
            <img
              :class="'show_' + item.index"
              :src="item.icon_hover"
              alt="icon"
              style="display: none"
            />
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>

      <!-- system -->
      <div class="system">
        <el-menu-item index="logout">
          <i class="el-icon-switch-button"></i>
          <span slot="title">退出登录</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import bus from "../utils/bus";

export default {
  data() {
    return {
      collapse: false,
      items: [
        {
          icon: require("../assets/images/speed.png"),
          icon_hover: require("../assets/images/speed_hover.png"),
          index: "speedup",
          title: "加速",
          route_only: false,
        },
        {
          icon: require("../assets/images/vip.png"),
          icon_hover: require("../assets/images/vip_hover.png"),
          index: "vip",
          title: "会员",
          route_only: false,
        },
        {
          icon: require("../assets/images/setting.png"),
          icon_hover: require("../assets/images/setting_hover.png"),
          index: "setting",
          title: "设置",
          route_only: false,
        },
        {
          icon: require("../assets/images/about.png"),
          icon_hover: require("../assets/images/about_hover.png"),
          index: "about",
          title: "关于",
          route_only: false,
        },
      ],
    };
  },
  computed: {
    onRoutes() {
      var route = this.$route.path.replace("/", "");
      setTimeout(() => {
        this.items.map((item) => {
          if (route === item.index) {
            document.querySelector(".hide_" + item.index).style.display =
              "none";
            document.querySelector(".show_" + item.index).style.display =
              "block";
          } else {
            document.querySelector(".hide_" + item.index).style.display =
              "block";
            document.querySelector(".show_" + item.index).style.display =
              "none";
          }
        });
      }, 0);

      return route;
    },
  }
};
</script>

<style lang="less" scoped>
.el-menu {
  /deep/ .el-menu-item {
    border-radius: 7px;
    margin: 0 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin: 16px 4px;

    span {
      margin-left: 7px;
      font-weight: bolder;
    }
  }
  /deep/ .el-menu-item:hover {
    background: #32b16c26 !important;
    color: #32b16c !important;

    img:nth-child(1) {
      display: none !important;
    }
    img:nth-child(2) {
      display: block !important;
    }
  }
}

.logo {
  font-size: 17px;
  font-weight: bolder;
  height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    margin-right: 8px;
  }
}
.user {
  display: flex;
  justify-content: center;
  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
    img {
    }
  }
}

.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 160px;
  border-right: none;
}
.sidebar > ul {
  height: 100%;
  border-color: #191b1e;
}
.system {
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>