作者：小土豆biubiubiu

博客園：https://www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）

作者文章的內容均來源于自己的實踐，如果覺得有幫助到你的話，可以點贊給個鼓勵或留下寶貴意見

前言

在日常開發中，專案中的選單欄都是已經實作好了的，如果需要添加新的選單，只需要在路由配置中新增一條路由，就可以實作選單的添加，

相信大家和我一樣，有時候會躍躍欲試自己去實作一個選單欄，那今天我就將自己實作的選單欄的整個思路和代碼分享給大家，

本篇文章重在總結和分享選單欄的一個遞回實作方式，代碼的優化、選單權限等不在本篇文章范圍之內，在文中的相關部分也會做一些提示，有個別不推薦的寫法希望大家不要參考哦，

同時可能會存在一些細節的功能沒有處理或者沒有提及到，忘知曉，

最終的效果

本次實作的這個選單欄包含有一級選單、二級選單和三級選單這三種型別，基本上已經可以覆寫專案中不同的選單需求，

后面會一步一步從易到難去實作這個選單，

簡單實作

我們都知道到element提供了 NavMenu 導航選單組件，因此我們直接按照檔案將這個選單欄做一個簡單的實作，

基本的布局架構圖如下：

選單首頁-menuIndex

首先要實作的是選單首頁這個組件，根據前面的布局架構圖并且參考官方檔案，實作起來非常簡單，

<!-- src/menu/menuIndex.vue -->
<template>
    <div id="menu-index">
        <el-container>
            <el-header>
                <TopMenu :logoPath="logoPath" :name="name"></TopMenu>
            </el-header>
            <el-container id="left-container">
                <el-aside width="200px">
                    <LeftMenu></LeftMenu>                    
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import LeftMenu from './leftMenu';
import TopMenu from './topMenu';
export default {
    name: 'MenuIndex',
    components: {LeftMenu, TopMenu},
    data() {
        return {
            logoPath:  require("../../assets/images/logo1.png"),
            name: '員工管理系統'
        }
    }
}
</script>
<style lang="scss">
    #menu-index{
        .el-header{
            padding: 0px;
        }
    }
</style>

頂部選單欄-topMenu

頂部選單欄主要就是一個logo和產品名稱，

邏輯代碼也很簡單，我直接將代碼貼上，

<!-- src/menu/leftMenu.vue -->
<template>
    <div id="top-menu">
        <img class="logo" :src=https://www.cnblogs.com/HouJiao/p/"logoPath" />
        {{name}}

這個是父組件menuIndex傳遞給子組件topMenu的兩個資料，分別是logo圖示的路徑和產品名稱，

左側選單欄-leftMenu

不過在實際專案在設計的時候，選單欄的內容有可能來自后端給我們回傳的資料，其中包含選單名稱、選單圖示以及選單之間的層級關系，

總而言之，我們的選單是動態生成的，而不是像前面那種固定的寫法，因此下面我將實作一個動態生成的選單，選單的資料來源于我們的路由配置，

結合路由配置實作動態選單

路由配置

在這段代碼的最開始部分，我們引入了需要使用的組件，接著就對路由進行了配置，

路由配置除了最基礎的path、component以及children之外，還配置了一個meta資料項，

meta資料包含的配置有選單標題(title)、圖示的類名(icon)和是否包含子節點(hasSubMenu)，

根據title、icon這兩個配置項，可以展示當前選單的標題和圖示，

hasSubMenu表示當前的選單項是否有子選單，如果當前選單包含有子選單(hasSubMenu為true)，那當前選單對應的標簽元素就是el-submenu；否則當前選單對應的選單標簽元素就是el-menu-item，

根據路由實作多級選單

獲取路由配置

既然要根據路由配置實作多級選單，那第一步就需要獲取我們的路由資料，這里我使用簡單粗暴的方式去獲取路由配置資料：this.$router.options.routes，

一級選單

主要的邏輯就是回圈路由資料routesInfo，在回圈的時候判斷當前路由route是否包含子選單，如果包含則當前選單使用el-submenu實作，否則當前選單使用el-menu-item實作，

可以看到，我們第一級選單已經生成了，員工管理、考勤管理、工時管理這三個選單是有子選單的，所以會有一個下拉按鈕，

不過目前點開是沒有任何內容的，接下來我們就來實作這三個選單下的二級選單，

二級選單

二級選單的實作和一級選單的邏輯是相同的：回圈子路由route.children，在回圈的時候判斷子路由childRoute是否包含子選單，如果包含則當前選單使用el-submenu實作，否則當前選單使用el-menu-item實作，

三級選單

三級選單就不用多說了，和一級、二級邏輯相同，這里還是直接上代碼，

總結

不過這樣的代碼在邏輯上相關于三層嵌套的for回圈，對應的是我們有三層的選單，

假如我們有四層、五層甚至更多層的選單時，那我們還得在嵌套更多層for回圈，很顯然這樣的方式暴露了前面多層for回圈的缺陷，所以我們就需要對這樣的寫法進行一個改進，

遞回實作動態選單

前面我們一直在說一級、二級、三級選單的實作邏輯都是相同的：回圈子路由，在回圈的時候判斷子路由是否包含子選單，如果包含則當前選單使用el-submenu實作，否則當前選單使用el-menu-item實作，那這樣的邏輯最適合的就是使用遞回去實作，

所以我們需要將這部分共同的邏輯抽離出來作為一個獨立的組件，然后遞回的呼叫這個組件，

邏輯拆分

需要注意的是，這次抽離出來的組件回圈的時候直接回圈的是route資料，那這個route資料是什么呢，

按照這樣的邏輯，可以發現二級選單、三級選單回圈的資料源都是相同的，即前一個回圈結果項的children，而一級選單的資料來源于this.$router.options.routes，

前面我們抽離出來的menuItem組件，回圈的是route資料，即不管是一層選單還是二層、三層選單，都是同一個資料源，因此我們需要統一資料源，那當然也非常好實作，我們在呼叫組件的時候，為組件傳遞不同的值即可，

代碼實作

前面公共組件已經拆分出來了，后面的代碼就非常好實作了，

首先是抽離出來的meunItem組件，實作的是邏輯判斷以及遞回呼叫自身，

接著是leftMenu組件，呼叫menuIndex組件，傳遞原始的路由資料routesInfo，

最終的結果這里就不展示了，和我們需要實作的結果是一致的，

功能完善

到此，我們結合路由配置實作了選單欄這個功能基本上已經完成了，不過這是一個缺乏靈魂的選單欄，因為沒有設定選單的跳轉，我們點擊選單欄還無法路由跳轉到對應的組件，所以接下來就來實作這個功能，

選單跳轉的實作方式有兩種，第一種是NavMenu組件提供的跳轉方式，

那本次我選擇的是第一種方式實作跳轉,這種實作方式需要兩個步驟才能完成，第一步是啟用el-menu上的router;第二步是設定導航的index屬性，

啟用el-menu上的router

設定導航的index屬性

首先我將每一個選單標題對應需要設定的index屬性值列出來，

接著在回顧前面遞回呼叫的組件，導航選單的index設定的是child.path，為了看清楚child.path的值，我將其添加選單標題的右側，讓其顯示到界面上，

可以發現，child.path的值就是當前選單在路由中配置path值(router.js中配置的path值)，

那么問題就來了，前面我們整理了每一個選單標題對應需要設定的index屬性值，就目前來看,現在設定的index值是不符合要求的，不過仔細觀察現在選單設定的index值和正常值是有一點接近的，只是缺少了上一級選單的path值，如果能將上一級選單的path值和當前選單的path值進行一個拼接，就能得到正確的index值了，

那這個思路實作的方式依然是在遞回時將當前選單的path作為引數傳遞給menuItem組件，

將當前選單的path作為引數傳遞給menuItem組件之后，在下一級選單實作時，就能拿到上一級選單的path值，然后組件中將basepath的值和當前選單的path值做一個拼接，作為當前選單的index值，

我們可以看到二級選單的index值已經沒問題了，但是仔細看，發現工時管理-工時串列下的兩個三級選單index值還是有問題，缺少了工時管理這個一級選單的path，

那這個問題是因為我們在呼叫組件自身是傳遞的basepath有問題，

basepath傳遞的只是上一級選單的path，在遞回二級選單時，index的值是一級選單的path值+二級選單的path值;那當我們遞回三級選單時，index的值就是二級選單的path值+三級選單的path值，這也就是為什么工時管理-工時串列下的兩個三級選單index值存在問題，

所以這里的basepath值在遞回的時候應該是累積的，而不只是上一級選單的path值，因此借助遞回演算法的優勢，basepath的值也需要通過getPath方法進行處理，

Vue結合路由配置遞回實作選單欄

前言