vue-insagent-pc/src/components/MenuTree/index.vue

<template>
  <el-submenu  v-if="menu.children && menu.children.length >= 1" :index="menu.id.toString()">
    <template  slot="title">
      <i class="iconfont" :class="menu.icon"></i>
      <span slot="title" class="firstMenu" >{{ menu.name }}</span>
    </template>
    <MenuTree v-for="item in menu.children" :key="item.id" :menu="item"></MenuTree>
  </el-submenu>
  <el-menu-item v-else :index="menu.id.toString()" @click="handleRoute(menu)">
    <i class="iconfont" :class="menu.icon" ></i>
    <span slot="title">{{ menu.name }}</span>
  </el-menu-item>
</template>

<script>
import { getIFrameUrl, getIFramePath } from '@/utils/iframe'
export default {
  name: 'MenuTree',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
    }
  },
  created() {
  },
  methods: {
    handleRoute(menu) {
      // 如果是嵌套页面，转换成iframe的path
      let path = getIFramePath(menu.url)
      if (!path) {
        path = menu.url
      }
      // 通过菜单URL跳转至指定路由
      this.$router.push("/" + path)

    }
  }
}
</script>

<style scoped lang="scss">

/deep/ {

  .el-menu-item {
    margin: 4px 0 ;
  }
  .el-menu--popup-right-start{
    padding: 10px;
    box-sizing: border-box;
  }
  .el-submenu__title:hover{
    background-color: rgba(212,36,38,0.1) !important;
    border-radius: 4px !important;

  }
  .el-menu-item:hover{
    background-color: rgba(212,36,38,0.1) !important;
    border-radius: 4px !important;
  }
}
.el-menu-item.is-active {
  // background-color: #428BCA !important;
  background: linear-gradient(90deg, #F34747 0%, #DF3739 100%);
  box-shadow: 2px 4px 8px 0px rgba(212, 36, 38, 0.2);
  border-radius: 4px;
  color: #fff !important;
  z-index: 999;

}
</style>