leftMenu.vue
<template>
<div class="menu-left">
    <el-menu
        router
        class="el-menu-vertical-demo"
        background-color="#f6f9fe"
        text-color="#333"
        @select="handleSelect"
        :default-active="$route.name"
    >
        <Menu :path_s="path_s" :menuList="menuList"></Menu>
        <!-- <div class="tiku" @click="question">题库</div> -->
    </el-menu>
</div>
</template>

<script>
import Menu from './menu.vue'; //引进菜单模板
export default {
  name:'',
   components:{
          Menu//使用菜单组件
  },
  data(){

   return {
        path_s:"",
        menuList: [
        {
          path: "/",
          label: "首页",
          name:"home",
          iconClass: "icon-shouye",
          img: require('../assets/sy.png'),
          imgs: require('../assets/syt_p.png'),
        },
        // {
        //   path: "/caseevaluates/caseevaluate",
        //   label: "评论",
        //   iconClass: "icon-shouye",
        //   img: require('../assets/sy.png'),
        // },
        {
          label: "基础参数维护",
          iconClass: "1",
          img: require('../assets/jccswh.png'),
          imgs: require('../assets/jccswh_p.png'),
          children: [
            {
              path: "/basicParam/Interrogation",
              label: "1",
              name: "Interrogation",
            },
             {
              path: "/basicParam/CourseInfo",
              label: "2",
              name: "CourseInfo",
            },
            {
              path: "/basicParam/Materialmaintenance",
              label: "3",
              name: "Materialmaintenance",
            },
          ]
        },
        {
          path: "/CourseDevelopment/classliandong",
          img: require('../assets/kckf.png'),
          imgs: require('../assets/kckf_p.png'),
          label: "课程开发",
          name:"class",
          iconClass: "2",
        },
      ]
   }
  },

  methods:{
    question(){
       window.open("http://192.168.1.152:13000/",'_blank') // 新窗口打开外链接
    },
    handleSelect(key, keyPath){
       console.log(key);
       this.path_s = key
       console.log(keyPath);
    },
  },
  mounted(){
    this.path_s = this.$route.name
  }

}
</script>

<style lang="scss" scoped>
.tiku{height: 40px;text-align: left;line-height: 40px;text-indent: 40px;color:rgb(156, 199, 212);;}
.tiku:hover{background-color: #d0e8ff !important;;}
.menu-left ::v-deep .el-submenu__title{height: 44px;line-height: 44px;}
.menu-left ::v-deep .el-menu-item{height: 44px;line-height: 44px;}
.menu-left ::v-deep .el-submenu__title:hover,.el-submenu__title:focus{background-color:#d0e8ff  !important;}
.menu-left ::v-deep .el-menu-item:hover, .el-menu-item:focus{background-color: #d0e8ff  !important;}
.menu-left ::v-deep .el-menu-item.is-active{color: #fff !important;background-color: #3185f9 !important;}
/* .element  .el-menu-item:hover{background-color:inherit !important;} */
.el-menu-vertical-demo{width: 260px;height: 100%;}

.menu-left{height: 100%;}

</style>
menu.vue

<template>
<div>
     <template v-for="(list,index) in menuList" >
        <!-- 如果当前有子菜单，则显示 el-submenu ，在el-subment 里调用 递归组件 -->
        <el-submenu :index="index + ''" v-if="list.children" :key="index"> 
          <template slot="title" >
            <i class="fa fa-margin fa-server"> <img :src="list.img"> </i>
            <span slot="title">{{ list.label}}</span>
          </template>
          <Menu :menuList="list.children"></Menu>
        </el-submenu>
         <!-- 如果没有子菜单，则显示当前内容 -->
        <el-menu-item v-else :index="list.name"  :key="index" :route="list.path">
          <i v-if="list.name!=path_s" class="fa fa-margin fa-server"> <img :src="list.img"> </i>
          <i v-else class="fa fa-margin fa-server"> <img :src="list.imgs"> </i>
          <span>{{list.label}}</span>
        </el-menu-item>
      </template>
</div>
</template>

<script>
export default {
  name:'Menu',//模板名称
  props:{
     menuList:{ 
       type:Array,  
       default: ()=>{
          return []   //没有return会报错，而null 需求而定 也可以空数组等[]
       }
    },
    path_s:{ 
       type:String,  
       default: ()=>{
          return ""  //没有return会报错，而null 需求而定 
       }
    },

  },
  data(){
  
   return {
   
   }
  },
  methods:{
   
  },
  mounted(){
  
   
  }
}
</script>

<style scoped>
 .fa-server{position: relative;left: -6px;top: -2px;}
</style>