platformFront/src/components/common/Menu.vue

<template>
  <el-menu
    :router="true"
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <template v-for="(item,index) in data">
      <el-menu-item :index="'/'+role+'/'+item.code" v-if="item.subMenuList.length==0">
        <!-- <i v-bind:class="icons[item.code]"></i> -->
        <i class="el-icon-location"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
      <el-submenu v-if="item.subMenuList.length>0" :index="index+1+''">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item v-for="(sub,i) in item.subMenuList" :index="'/'+role+'/'+sub.code">
          <p>{{sub.name}}</p>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import config from '@api/config.js';

export default {
  name: 'lt-menu',
  props: ['data', 'role'],
  data: function() {
    return {
      icons: config.menuIconList,
      defaultActive: ''
    };
  },
  computed: {
    defaultMItem: function() {
      let route = this.$route.path;
      return route;
    }
  },
  created() {
    // console.log(this.$route,'this.$route');
    this.defaultActive = this.$route.fullPath;

    // let menupath = localStorage.getItem('menuPath');
    // this.defaultActive = this.$route.fullPath;
    // console.log(this.defaultActive,'defaultActive');
    // console.log(menupath,'menupath');
    // if (this.$route.fullPath != menupath) {
    //   this.defaultActive = menupath;
    //   this.$router.push({ path: menupath });
    // } else {
    //   this.defaultActive = this.$route.fullPath;
    // }
  },
  methods: {
    handleSelect(key, keyPath) {
      localStorage.setItem('menuPath', key);
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu-item p {
  display: table-cell;
  vertical-align: middle;
  white-space: normal;
  line-height: 20px;
  height: 50px;
}
/*.el-menu-vertical-demo {
    min-width: 300px;
  }*/
</style>