12-导航菜单的递归

• 父级

<template>
  <div>
    <template v-if="onlyOne(item)">
      <el-menu-item :index="item.children[0].path">
        <span :class="['iconfont','icon-'+item.meta.icon]" />
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu :index="item.path">
        <template slot="title">
          <span :class="['iconfont','icon-'+item.meta.icon]" />
          <span>{{ item.meta.title }}</span>
        </template>
        <InnerItem :key="item.path" :items="item.children" />
      </el-submenu>

    </template>
  </div>

</template>

<script>
import InnerItem from './innerItem'
export default {
    name: 'BarItem',
    components: {
        InnerItem
    },
    props: {
        item: {
            type: Object,
            default() {
                return []
            }
        }
    },
    data() {
        return {

        }
    },
    methods: {
        onlyOne(item) {
            if (item.children && item.children.length === 1) {
                return true
            }
            return false
        }
    }
}
</script>

<style scoped>
.iconfont{margin-right: 10px;}
</style>

• 子级递归

<template>
  <div>
    <template v-for="child in items">
      <template v-if="onlyOne(child)">
        <el-menu-item :key="child.path" :index="child.path">
          <span slot="title">{{ child.meta.title }}</span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-submenu :key="child.path" :index="child.path">
          <template slot="title">
            <span>{{ child.meta.title }}</span>
          </template>
         //  自己调用自己
          <InnerItem :key="child.path" :items="child.children" />
        </el-submenu>
      </template>
    </template></div>
</template>

<script>
export default {
    name: 'InnerItem',
    components: {

    },
    props: ['items'],
    data() {
        return {

        }
    },
    methods: {
        onlyOne(item) {
            if (!item.children || (item.children && item.children.length === 1)) {
                return true
            }
            return false
        }
    }
}
</script>
<style scoped>
</style>