ChuangHeng_new/src/views/main-sidebar-sub-menu.vue

<template>
  <el-submenu
    v-if="menu.children.length >= 1"
    :index="menu.id"
    :popper-append-to-body="false"
  >
    <template slot="title">
      <div
        :class="
          $store.state.sidebarMenuActiveName.indexOf(menu.name) > -1 ? 'on' : ''
        "
      >
        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
          <use :xlink:href="`#${menu.icon}`"></use>
        </svg>
        <span>{{ menu.name }}</span>
      </div>
    </template>
    <sub-menu
      v-for="item in menu.children"
      :key="item.id"
      :menu="item"
    ></sub-menu>
  </el-submenu>
  <el-menu-item
    v-else
    :index="menu.id"
    @click="gotoRouteHandle(menu.id, menu.name)"
  >
    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true" v-if="menu.icon">
      <use :xlink:href="`#${menu.icon}`"></use>
    </svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
export default {
  name: "sub-menu",
  props: {
    menu: {
      type: Object,
      required: true,
    },
  },
  components: {
    SubMenu,
  },
  created() {
    this.$store.state.currentMenuId = localStorage.getItem("currentMenuId");
  },
  mounted() {},
  methods: {
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle(menuId, menuName) {
      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
        if (this.$router.history.current.meta.title != route.meta.title) {
          this.$router.push({ name: route.name });
        } else {
          this.$store.state.currentPayWorryRecord="";
          this.$store.state.contentIsNeedRefresh = true;
          this.$nextTick(() => {
            this.$store.state.contentIsNeedRefresh = false;
          });
        }
      }
      this.$store.state.sidebarMenuActiveName = [];
      this.$store.state.sidebarMenuActiveName.push(route.meta.title);
      this.$store.state.currentMenuId = menuId;
      localStorage.setItem("currentMenuId", menuId);
    },
  },
};
</script>
<style>
  .el-menu-item:hover,.el-submenu__title:hover,.el-menu-item.is-active,.aui-sidebar__menu .el-submenu.is-active > .el-submenu__title{
    background: rgba(118,30,106,0.06) !important;
  }
  .el-menu-item:hover span,.el-menu-item:hover svg,.el-submenu__title:hover span,.el-submenu__title:hover svg,.el-menu-item.is-active,.aui-sidebar__menu .el-submenu.is-active > .el-submenu__title{
    color: #761E6A !important;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-menu-item {
    padding-left: 30px!important;
  }

  .onws {
    background-color: #e9f0ff;
    color: #2e69eb !important;
  }
  .el-submenu__title:hover {
    .on {
      background-color: #e9f0ff;
      color: #2e69eb !important;
    }
  }
</style>