sisweb/src/components/common/menu.vue

<template>
  <el-menu v-if="menuIndex !== undefined" :default-active="menuIndex" background-color="#545c64" text-color="#fff"
    active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal">
    <template v-for="(item, i) in menu">
      <el-menu-item :key="i" v-if="item.children.length === 0" :index="(i+1)+''" @click="menuC(item)">{{item.name}}</el-menu-item>
      <menuZj :key="i" v-else :obj="item" :fIndex="(i+1)+''"></menuZj>
    </template>
  </el-menu>
  <el-submenu v-else :index="fIndex" :popper-append-to-body="false">
    <template slot="title">{{obj.name}}</template>
    <template v-for="(item, i) in obj.children">
      <el-menu-item :key="i" v-if="item.children.length === 0" :index="fIndex+'-'+(i+1)" @click="menuC(item)">{{item.name}}</el-menu-item>
      <menuZj :key="i" v-else :obj="item" :fIndex="fIndex+'-'+(i+1)"></menuZj>
    </template>
  </el-submenu>
</template>

<script>

export default {
  name: "menuZj",
  data () {
    return {
    }
  },
  props: {
    menuIndex: String, // 菜单默认选中项
    menu: Array, // 菜单数据
    obj: Object, // 菜单对象
    fIndex: String, // 父元素的index值
  },
  mounted () {
    this.init();
  },
  methods: {
    //初始化
    init () { },
    // 菜单点击跳转
    menuC (item) {
      if (item.type === 'changeTheme') {
        this.$store.commit('changeTheme', item.url);
        console.log(222, this.$store); return
      } else {
        this.$router.push({
          path: item.url
        });
      }

    }
  }
}
</script>