element-ui el-menu 刷新保持高亮的写法

<template>
  <el-menu
    :collapse="isCollapse"
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <h3 v-show="isCollapse">
      <img src="../assets/images/logo.png" />
    </h3>
    <h3 v-show="!isCollapse">
      <img src="../assets/images/logo.png" />
      运维系统
    </h3>
    <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path" @click="clickMenu(item)">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  data() {
    return {
      asideMenu: [
        {
          path: '/home',
          name: 'home',
          label: '巡检列表',
          icon: 'tickets'
        },
        {
          path: '/service-inspect',
          name: 'service-inspect',
          label: '新增巡检',
          icon: 'document-add'
        },
      ],
      defaultActive: '/home',
    }
  },
  created () {
    this.setCurrentRoute()
  },
  methods: {
    setCurrentRoute () {
      this.defaultActive = this.$route.path  //关键  通过他就可以监听到当前路由状态并激活当前菜单
    },
    clickMenu(item) {
      this.$router.push({ name: item.name })
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  border: none;
  h3 {
    height: 64px;
    color: #ffffff;
    padding: 0 20px;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    img {
       30px;
      height: 30px;
      margin-right: 5px;
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
   160px;
}
</style>