iview菜单menu封装成二级菜单和无限级菜单

ivew的menu封装成二级菜单和无限极菜单
demo中有注释，此处不赘述了

github地址：

效果：
二级菜单封装：

<template>
  <div class='con'>

    <Menu :theme="theme2" style='width:240px;float:left'>
      <div v-for="(item,index) in menuList" :key="'menu'+index">
        <MenuItem :name="item.name" :to="item.to" v-if="typeof(item.children)!=='undefined' && item.children.length===0">
        <Icon type="ios-navigate"></Icon>
        <span>{{item.title}}</span>
        </MenuItem>

        <Submenu :name="item.name" v-else>
          <template slot="title">
            <Icon type="ios-paper" />
            <span>{{item.title}}</span>
          </template>
          <MenuItem :name="subItem.name" :to="subItem.to" v-for="(subItem,index) in item.children" :key="index">{{subItem.title}}</MenuItem>
        </Submenu>
      </div>
    </Menu>
    <div class='pad'>
      <router-view />
    </div>

  </div>

</template>
<script>
export default {
  data () {
    return {
      theme2: 'light',
      menuList: [
        {
          title: "内容管理",
          name: "1",
          children: [
            {
              title: "文章管理",
              name: "1-1",
              to: "/article"
            },
            {
              title: "评论管理",
              name: "1-2",
              to: "/comments"
            },
            {
              title: "举报信息",
              name: "1-3",
              to: "/report"
            },
            {
              title: "test1信息",
              name: "1-4",
              to: "/test1"
            }
          ]
        },
        {
          title: "用户管理",
          name: "2",
          children: [
            {
              title: "新增用户",
              name: "2-1",
              to: "/addUser"
            },
            {
              title: "活跃用户",
              name: "2-2",
              to: "/active"
            }
          ]
        },
        {
          title: "统计分析",
          name: "3",
          children: [
            {
              title: "新增和启动",
              name: "3-1",
              to: "/addAndStart"
            },
            {
              title: "活跃分析",
              name: "3-2",
              to: "activeAnalyze"
            },
            {
              title: "时段分析",
              name: "3-3",
              to: "/activeAnalyze"
            }
          ]
        },
        {
          title: "报表中心",
          name: "4",
          children: [
            {
              title: "数据报表",
              name: "4-1",
              to: "/activeAnalyze"
            },
            {
              title: "运营报表",
              name: "4-2",
              to: "/activeAnalyze"
            },
            {
              title: "操作报表",
              name: "4-3",
              to: "/activeAnalyze"
            },
            {
              title: "异步通知",
              name: "4-6",
              to: "/activeAnalyze"
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  display: flex;
  .pad {
    margin: 5px;
    float: left;
    background: red;
    flex: 1;
  }
}
</style>

无限极菜单封装：
子组件代码：

<template>
  <Submenu :name="menuList.name">
    <!-- 父级菜单 -->
    <template slot="title">
      <Icon :type="menuList.icon" />
      <span>{{ menuList.title }}</span>
    </template>
    <template v-for="item in menuList.children">
      <!-- 如果还有子集，继续调用   -->
      <left-menu-nav v-if="item.children&&item.children.length!==0" :menuList='item' :key='item.index'>
      </left-menu-nav>
      <!-- 子菜单  -->
      <menu-item v-else :key="item.id" :name="item.name" :to="item.to">
        {{item.title}}
      </menu-item>
    </template>
  </Submenu>
</template>
<script>
export default {
  name: 'leftMenuNav',
  props: {
    menuList: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      theme2: 'light',

    }
  }
}
</script>
<style lang="less" scoped>
</style>

父组件代码：

<template>
  <!-- 无限级 -->
  <div class='con'>
    <Menu :theme="theme2" accordion>
      <template :name="item.name" v-for="item in menuList">
        <!-- 有子菜单 -->
        <left-menu-nav v-if="item.children&&item.children.length!==0" :menuList='item' :key='item.name'>
        </left-menu-nav>
        <!-- 无子菜单 -->
        <menu-item v-else :name="item.name" :to="item.to" :key='item.name'>{{item.title}}</menu-item>
      </template>
    </Menu>
    <div class='pad'>
      <router-view />
    </div>
  </div>

</template>
<script>
// eslint-disable-next-line no-unused-vars
import leftMenuNav from '@/common/About.vue'
export default {
  name: 'leftMenu',
  components: {
    leftMenuNav
  },
  data () {
    return {
      name: 'menu',
      theme2: 'light',
      menuList: [
        {
          title: "oralinge",
          name: "0",
          to: '/oralinge'
        },
        {
          title: "模块管理",
          name: "1",
          children: [
            {
              title: "文件管理",
              name: "1-1",
              children: [
                {
                  title: "路由管理",
                  name: "1-1-1",
                  children: [
                    {
                      title: "代码管理",
                      name: "1-1-1-1",
                      to: "/code"
                    }
                  ]
                },
                {
                  title: "组件管理",
                  name: "1-1-2",
                  to: "/con"
                }
              ]
            },
            {
              title: "产品管理",
              name: "1-2",
              to: "/pro"
            },
            {
              title: "商户管理",
              name: "1-3",
              to: "/mer"
            },
            {
              title: "合同信息",
              name: "1-4",
              to: "/contract"
            }
          ]
        },
        {
          title: "架构管理",
          name: "2",
          children: [
            {
              title: "webpack",
              name: "2-1",
              to: "/webpack"
            },
            {
              title: "gulp",
              name: "2-2",
              to: "/gulp"
            }
          ]
        },
        {
          title: "生死簿",
          name: "3",
          children: [
            {
              title: "白名单",
              name: "3-1",
              to: "/Whitelist"
            },
            {
              title: "黑名单",
              name: "3-2",
              to: "blacklist"
            }
          ]
        },
        {
          title: "数据中心",
          name: "4",
          children: [
            {
              title: "报表数据",
              name: "4-1",
              to: "/data"
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.con {
  width: 100%;
  display: flex;
  .pad {
    margin: 5px;
    float: left;
    background: red;
    flex: 1;
  }
}
</style>