使用 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"。