看过Element-UI的导航菜单组件的文档的同学应该了解到文档的demo都是有限级的菜单，然而现实场景业务通常有可能是这样子：
（1）菜单由后台接口返回；
（2）前端写死，但是业务需求是不定级别的导航菜单。下面就为实现无限级下拉导航菜单献上code！
一：实现无限级下拉的思路是：递归菜单数组数据。
二：实现操作是：组件调用自己本身从而达到实现递归菜单数据。
（1）父组件：menu.vue

// menu.vue
<el-menu
     :default-active="$route.path"  // 设置高亮当前默认的路由
     router // 设置使用 router，即默认使用vue-router来实现路由的跳转，以index做为path来跳转
     class="pci-layout-nav-menu"
     mode="horizontal"
     background-color="#000000"
     text-color="#fff"
     active-text-color="#ff9633"
 >
     <template v-for="item in menu">
         <child-menu v-if="item.children" :data="item" :key="item.name" /> // 调用子组件
         <el-menu-item v-else :index="item.route" :key="item.name">{{ item.name }}</el-menu-item>
     </template>
 </el-menu>

（2）子组件：child-menu 实现无限级下拉菜单，递归数据，组件调用自己本身完成需求。

// child-menu.vue
<template>
    <el-submenu :index="data.route">
        <template slot="title">{{ data.name }}</template>
        <template v-for="item in data.children">
            <child-menu
                v-if="item.children"
                :data="item"
                :key="item.name"
            />  // 当还有下级菜单时调用组件本身
            // 递归出口：当没有下级菜单时跳出递归，完成渲染最外面层的菜单
            <el-menu-item v-else :index="item.route" :key="item.name">{{ item.name }}</el-menu-item>
        </template>
    </el-submenu>
</template>

<script>
export default {
    name: 'child-menu',
    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    }
};
</script>

（3）menu的数据结构参考：

// 路由只需设置最深一级菜单的即可
menu: [
		// 三级菜单
        {
            name: '菜单三',
            route: '/',
            children: [
                {
                    name: '菜单三__1',
                    route: '/',
                    children: [
                        {
                            name: '菜单三__1-1',
                            route: '/console/one'
                        },
                        {
                            name: '菜单三__1-2',
                            route: '/console/two'
                        }
                    ]
                }
            ]
        },
        {
            name: '菜单二',
            route: '/',
            children: [
                {
                    name: '菜单二__1',
                    route: '/second/one'
                },
                {
                    name: '菜单二__2',
                    route: '/second/two'
                }
            ]
        },
        // 一级菜单
        {
            name: '菜单一',
            route: '/third',
            ]
        }
    ]

以上就是使用 navMenu 组件实现无限级下拉导航菜单。
总结：
（1）实现无限级下拉的思路就是递归菜单数组，子组件调用自己本身完成递归渲染。
（2）要使用默认的vue-router完成路由跳转需要设置router，并且index属性赋值为各个菜单项的path。
（3）要默认高亮显示当前路由菜单项，需要设置default-active="$route.path"。