使用 Element-UI 的 navMenu 组件实现无限级下拉导航菜单并实现路由跳转和默认当前路由高亮样式

看过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"。