基于element-ui封装菜单树

<template>
  <div>
    <div v-for="item in menus" :key="item.id" :index="item.menuUrl">
      <!-- 有子菜单 -->
      <el-submenu :index="item.menuUrl" v-if="item.children">
        <template slot="title">
          <i :class="item.menuIcon" style="width:30px;"></i>
          <span slot="title" style="margin-left:10px;">{{ item.menuName }}</span>
        </template>
        <tree-menu :menus="item.children"></tree-menu>
      </el-submenu>
      <!-- 无子菜单 -->
      <el-menu-item :index="item.menuUrl" v-else>
        <i :class="item.menuIcon" style="width:30px;"></i>
        <span slot="title" style="margin-left:10px;">{{ item.menuName }}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
export default {
  props: ['menus'],
  name: 'tree-menu',
}

</script>

<template>
  <el-menu :router='true' background-color="#070916" text-color="#fff" :default-active="$route.path">
    <tree-menu :menus="menusData"></tree-menu>
  </el-menu>

  <div id="main">
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
import TreeMenu from '@/components/TreeMenu'
export default {
  name: 'Home',
  components: { TreeMenu },
  data () {
    return {
      menusData: [
        { menuName: '首页', menuUrl: '/home' },
        {
          menuName: '用户详情',
          menuUrl: '/userInfo',
          children: [
            {
              menuName: 'some',
              menuUrl: '/some',
            }
          ]
        },
      ]
    }
  },

}
</script>