VUE中動態菜單的遞歸實現

董洪蒙

摘 要：前端開發是系統的臉面，國內開源JS框架VUE表現優異，很多前端開發者都采用它來實現業務系統界面。本篇文章來源于開發實戰，如何實現一個精致、可拓展動態菜單，并闡述了開發思路、開發技術，展示了精煉后的核心代碼，以期為前端開發者提供開發思路，共同集思廣益。

關鍵詞：VUE，vue-router，菜單，遞歸實現

VUE作為國產優秀的構建用戶界面的漸進式JS框架，它是以數據驅動和組件化的思想構建的。VUE與國外類似的框架相比，提供了更加簡潔的API，能很快地上手，是創建項目的首選前端框架。

筆者在為某政府機關開發一套小型業務系統，采用VUE作為前端框架，且采用了vue-router路由組件、vuex數據組件，主體上使用螞蟻金服的ant design vue作為界面實現的組件庫。采用的業務系統非常流行的頂部-側邊-通欄布局，感覺其中的難點在于菜單的實現，因為各個用戶因角色身份的不同，我們希望實現與其權限所對應的菜單，由此必須通過AJAX技術動態從服務端取得動態菜單條目，并填充到界面中。假定通過axios從后端取得如下JSON菜單數據：

"routes"： [

"path"： "/"，

"component"： （） =>

import（/* webpackChunkName： "layout" */ "./layouts/BasicLayout"），

"children"： [

{

"path"： "/"，

"redirect"： "/dashboard/analysis"

}，

{

"path"： "/dashboard"，

"name"： "dashboard"，

"meta"： {

"icon"： "dashboard"，

"title"： "儀表盤"，

"authority"： ["admin"， "user"]

}，

}

...

很明顯，是在后端開發時根據用戶不同，生成不同的菜單數據，路徑下的meta字段，包括了authority，以表示顯示當前表單項的相關有權限用戶。同時也很看出我們要采用VUE的vue-router插件，以控制點擊菜單時在layout中出現的不同content組件，實現SPA效果。因為里邊有children子菜單的出現，所以要采用遞歸算法來動態生成相關的菜單表項，下面列出./layouts/SilderMenu/index.vue的模板實現：

可見要在JS代碼中提供menuData等相關數據：

data（） {

const menuData = this.getMenuData（this.$router.options.routes）

return {

menuData，

}

}，

getMenuData方法是獲取由服務端取得相關JSON數據渲染到實現菜單組件中，在methods中實現：

getMenuData（routes = []） {

const menuData = []

for （let item of routes） {

if （item.meta && item.meta.authority） {

if （！check（item.meta.authority）） {

continue

}

}

if （item.name && ！item.hideInMenu） {

const newItem = { ...item }

delete newItem.children

if （item.children && ！item.hideChildrenMenu） {

newItem.children = this.getMenuData（item.children）

} else {

}

menuData.push（newItem）

} else if （

！item.hideInMenu &&

！item.hideChildrenMenu &&

item.children

） {

menuData.push（

...this.getMenuData（item.children），

）

}

}

return menuData

}，

這段代碼十分復雜，有以下幾點值得注意：

* check（item.meta.authority）是檢查當前用戶是否顯示該菜單的判斷;

* 通過JSON菜單數據的hideMenu， hideChildMenu值，以判斷是否顯示在菜單中，因為我們是通過vue-router來推送路徑的，有的路徑不需要再現在菜單中，如404、登錄注冊頁面等。

* 根據菜單數據中children數據，采用遞歸調用方法，簡化了算法邏輯。

從./layouts/SilderMenu/index.vue中的

與SubMenu交互中，只需要通過VUE的props傳送已解析的菜單數據即可，即：menu-info="item"這段代碼。

菜單組件的實現，主要采用了唐金洲Vue開發實戰中的開發思路，是這段業務系統開發中花費時間較多的，邏輯也相對比較復雜的一段代碼，綜合運用了多種前端開發的前沿知識，本人也無法貼出所有代碼，細講所有的知識點，因為里邊涉及的東西太多了。有需要的可與我聯系，我們共同進步和提高。

參考文獻：

[1]唐金洲.Vue 開發實戰[EB/OL].北京：ant-design-vue官網.2019-5-1

[2]肖睿，龍穎.Vue 企業開發實戰[M].北京：人民郵電出版社.2018-12-01