專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)

更新時(shí)間：2022年07月18日 10:44:22 作者：江南一點(diǎn)雨

這篇文章主要為大家介紹了專業(yè)級(jí)的Vue?多級(jí)菜單設(shè)計(jì)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

老生常談了！

今天我想來(lái)和大家聊聊這個(gè)前端的動(dòng)態(tài)菜單，要如何設(shè)計(jì)才顯得專業(yè)！還是以我們的 TienChin 項(xiàng)目為例，大家一起來(lái)看看。

先來(lái)一張截圖看看效果：

那么這樣的菜單是如何設(shè)計(jì)出來(lái)的呢？

今天我也不想和大家聊過(guò)多的技術(shù)細(xì)節(jié)，就聊聊這個(gè)路由是如何設(shè)計(jì)的，一旦大家明白了路由是如何設(shè)計(jì)的，剩下的問(wèn)題都是細(xì)枝末節(jié)的問(wèn)題了。

1. 路由設(shè)計(jì)

有的小伙伴做過(guò) vhr，知道 vhr 里的動(dòng)態(tài)菜單實(shí)現(xiàn)方式，松哥和大家一樣，也是在不斷學(xué)習(xí)不斷進(jìn)步中，今天我想和大家探討 TienChin 項(xiàng)目中動(dòng)態(tài)菜單的實(shí)現(xiàn)方案，看看是否是一種更佳的解決方案。

1.1 菜單設(shè)計(jì)

先來(lái)和小伙伴們回顧下 vhr 中的方案：

在 vhr 中，權(quán)限的控制，只控制到二級(jí)菜單，也就是一級(jí)菜單和權(quán)限沒(méi)關(guān)系。舉個(gè)例子，現(xiàn)在有一級(jí)菜單 A 和二級(jí)菜單 B，B 是 A 中的菜單，現(xiàn)在假設(shè)：

如果當(dāng)前用戶權(quán)限可以查看 B 菜單，那么 A 菜單會(huì)自動(dòng)顯示出來(lái)。
如果當(dāng)前用戶權(quán)限無(wú)法查看 B 菜單，且 A 菜單中也沒(méi)有其他子菜單可以展示，那么 A 菜單就不會(huì)顯示出來(lái)。

換言之，A 菜單顯示與否，主要看它里邊有沒(méi)有子菜單需要展示，如果有，A 菜單就顯示，如果沒(méi)有，A 菜單就不顯示。

vhr 中的思路是這樣的。

在 TienChin 項(xiàng)目中，這一塊有一些變化：

如果 A 中只有一個(gè) B，那么似乎就沒(méi)有必要再做一個(gè)兩級(jí)菜單了，直接把 B 展示出來(lái)不就行了？用戶操作也方便！

這是第一個(gè)不一樣的地方。

1.2 路由數(shù)據(jù)

基于第一點(diǎn)，就涉及到一個(gè)問(wèn)題，就是路由接口該如何設(shè)計(jì)？最主要是接口返回的數(shù)據(jù)格式應(yīng)該是什么樣子的？

首先有一點(diǎn)小伙伴們應(yīng)該知道，這里的路由是一個(gè)嵌套路由，也就是一級(jí)菜單中嵌套著二級(jí)菜單。即使這個(gè)地方在展示的時(shí)候，不存在層級(jí)關(guān)系，例如上圖中的促銷活動(dòng)，但是底層的數(shù)據(jù)結(jié)構(gòu)也應(yīng)該是嵌套路由。

好啦，不賣關(guān)子了，我們來(lái)看一段路由 JSON：

[{
	"name": "Monitor",
	"path": "/monitor",
	"hidden": false,
	"redirect": "noRedirect",
	"component": "Layout",
	"alwaysShow": true,
	"meta": {
		"title": "系統(tǒng)監(jiān)控",
		"icon": "monitor",
		"noCache": false,
		"link": null
	},
	"children": [{
		"name": "Online",
		"path": "online",
		"hidden": false,
		"component": "monitor/online/index",
		"meta": {
			"title": "在線用戶",
			"icon": "online",
			"noCache": false,
			"link": null
		}
	}, {
		"name": "Job",
		"path": "job",
		"hidden": false,
		"component": "monitor/job/index",
		"meta": {
			"title": "定時(shí)任務(wù)",
			"icon": "job",
			"noCache": false,
			"link": null
		}
	}]
}, {
	"path": "/",
	"hidden": false,
	"component": "Layout",
	"children": [{
		"name": "Role",
		"path": "role",
		"hidden": false,
		"component": "system/role/index",
		"meta": {
			"title": "角色管理",
			"icon": "peoples",
			"noCache": false,
			"link": null
		}
	}]
}]

這里我舉了兩個(gè)菜單的例子，這兩個(gè)例子比較具有代表性，這個(gè)菜單最終顯示效果大概類似下面這樣：

系統(tǒng)監(jiān)控

在線用戶
定時(shí)任務(wù)

角色管理

大概顯示效果如上圖。

接下來(lái)我就來(lái)說(shuō)一下這里幾個(gè)典型屬性：

redirect：noRedirect 表示該路由在面包屑導(dǎo)航中不可被點(diǎn)擊。
alwaysShow：如果這個(gè)屬性設(shè)置為 false，那么當(dāng)當(dāng)前菜單只有一個(gè)子菜單的時(shí)候，默認(rèn)情況下就只會(huì)顯示子菜單，而忽略父菜單（如 1.1 小節(jié)所述），但是如果將該屬性設(shè)置為 true，則無(wú)論當(dāng)前菜單有幾個(gè)子菜單，都會(huì)將當(dāng)前菜單展示出來(lái)（這就類似于 vhr 中的效果了）。
每一個(gè)父菜單都有自己的 path，每一個(gè) children 也有自己的 path，父菜單的 path 加上每一個(gè) children 的 path，共同組成每一個(gè) children 的路徑。
再來(lái)看第二個(gè)角色管理這個(gè)菜單項(xiàng)，由于它的父菜單中只有一個(gè)子菜單項(xiàng)，并且父菜單中也沒(méi)有 alwaysShow 屬性，所以這個(gè)菜單項(xiàng)在最終展示的時(shí)候，就只展示里邊的角色管理，父菜單則不會(huì)展示出來(lái)（正好，生成的 JSON 中也沒(méi)說(shuō)父菜單的名字、圖標(biāo)等屬性）。

當(dāng)然，不是說(shuō)你的 JSON 這么寫(xiě)就自動(dòng)這么顯示，JSON 中的東西只是一個(gè)標(biāo)記，最終怎么顯示，還要看渲染：

<div v-if="!item.hidden">
  <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
    <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
      <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
        <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
      </el-menu-item>
    </app-link>
  </template>
  <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
    <template slot="title">
      <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
    </template>
    <sidebar-item
      v-for="child in item.children"
      :key="child.path"
      :is-nest="true"
      :item="child"
      :base-path="resolvePath(child.path)"
      class="nest-menu"
    />
  </el-submenu>
</div>

還有一個(gè)函數(shù)我就沒(méi)有列出來(lái)了，反正我們看名字也大概知道每一個(gè)函數(shù)的含義。

大家看，這個(gè) div 中實(shí)際上分為了兩部分，上面 template 專門用來(lái)處理 children 中只有一項(xiàng)的情況（角色管理），具體處理方式就是把 children 拿出來(lái)顯示，其他的則不考慮，具體執(zhí)行的時(shí)候不一定是只有一個(gè) children，也有可能壓根就沒(méi)有 children，此時(shí)直接顯示 parent 即可（參考 1.3 小節(jié)）。

下面的 el-submenu 則處理 children 有多個(gè)的情況（系統(tǒng)監(jiān)控）。

另外這里涉及到了一個(gè) resolvePath，也是特別關(guān)鍵的一個(gè)方法，我們來(lái)大致看下：

resolvePath(routePath, routeQuery) {
  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(this.basePath)) {
    return this.basePath
  }
  if (routeQuery) {
    let query = JSON.parse(routeQuery);
    return { path: path.resolve(this.basePath, routePath), query: query }
  }
  return path.resolve(this.basePath, routePath)
}

這個(gè)函數(shù)的主要左右，就是處理菜單的路徑問(wèn)題。

我們來(lái)看下這個(gè)具體的判斷邏輯：

如果這個(gè)菜單的路徑是一個(gè)外鏈（判斷邏輯是查看這個(gè) path 是否有 http 或者 https 等前綴），即 isExternal 返回 true，就把這個(gè)路徑原封不動(dòng)返回。
如果這個(gè)菜單的父菜單的路徑是一個(gè)外鏈，則將父菜單的 path 原封不懂返回。
如果有查詢參數(shù)，就把參數(shù)加上。
最后通過(guò) path.resolve 對(duì)路徑進(jìn)行一個(gè)簡(jiǎn)單運(yùn)算。

有的小伙伴可能對(duì) path.resolve 不熟悉，我簡(jiǎn)單說(shuō)下：

path.resolve() 方法可以將多個(gè)路徑解析為一個(gè)規(guī)范化的絕對(duì)路徑，它的處理方式類似于對(duì)這些路徑逐一進(jìn)行 cd 操作，然而與 cd 操作不同的是，這些路徑可以是文件，并且可不必實(shí)際存在（resolve() 方法不會(huì)利用底層的文件系統(tǒng)判斷路徑是否存在，而只是進(jìn)行路徑字符串操作）。例如：

path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')

相當(dāng)于：

cd foo/bar
cd /tmp/file/
cd ..
cd a/../subfile
pwd

舉個(gè)簡(jiǎn)單的例子：

path.resolve('/foo/bar', './baz') 
// 輸出結(jié)果為 
'/foo/bar/baz' 
path.resolve('/foo/bar', '/tmp/file/') 
// 輸出結(jié)果為 
'/tmp/file' 
path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif') 
// 當(dāng)前的工作路徑是 /home/javaboy/node，則輸出結(jié)果為 
'/home/javaboy/node/wwwroot/static_files/gif/image.gif'

現(xiàn)在大家知道菜單跳轉(zhuǎn)的路徑是怎么來(lái)的了吧！

1.3 外鏈問(wèn)題

在 TienChin 項(xiàng)目中，菜單還存在一個(gè)外鏈的問(wèn)題。

這個(gè)外鏈有兩種不同的顯示思路：

點(diǎn)擊外鏈，直接打開(kāi)一個(gè)新的選項(xiàng)卡，在新的選項(xiàng)卡中展示新的頁(yè)面。
點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開(kāi)一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示新的內(nèi)容。

對(duì)于第一種情況我就不和大家演示了，對(duì)于第二種情況，我截個(gè)圖給大家看下：

就是在當(dāng)前項(xiàng)目的選項(xiàng)卡中，展示一個(gè)外部鏈接的內(nèi)容。

我們先來(lái)看第一種情況。即點(diǎn)擊菜單之后，就在一個(gè)新的選項(xiàng)卡中打開(kāi)網(wǎng)頁(yè)，這種菜單的 JSON 格式如下：

{
    "name": "Http://www.javaboy.org",
    "path": "http://www.javaboy.org",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": "http://www.javaboy.org"
    }
}

這個(gè)大家看，也沒(méi)有 children，因?yàn)椴恍枰@個(gè)顯示的時(shí)候，就當(dāng)成了只有一個(gè) children 來(lái)處理，然后菜單項(xiàng)的 path 是一個(gè) http 路徑，一點(diǎn)擊，自然就跳到新的選項(xiàng)卡了。

對(duì)于第二種情況，即點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開(kāi)一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示鏈接的內(nèi)容，它的 JSON 結(jié)構(gòu)類似下面這樣：

{
    "name": "Http://www.javaboy.org",
    "path": "/",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": null
    },
    "children": [
        {
            "name": "Www.javaboy.org",
            "path": "www.javaboy.org",
            "hidden": false,
            "component": "InnerLink",
            "meta": {
                "title": "TienChin健身官網(wǎng)",
                "icon": "guide",
                "noCache": false,
                "link": "http://www.javaboy.org"
            }
        }
    ]
}

這個(gè)其實(shí)也沒(méi)啥好說(shuō)的，類似于上面系統(tǒng)監(jiān)控的那種情況，但是只有一個(gè)子菜單，在菜單渲染的時(shí)候，也是只渲染一個(gè)子菜單。由于父子菜單的 path 都不是以 http 或者 https 之類的地址開(kāi)頭，所以這個(gè)鏈接最終生成的 path 是 /www.javaboy.org，然后這個(gè)路徑的內(nèi)容將展示在 InnerLink 組件上，最終就是大家上圖中所看到的效果了。

好啦，這就是前端菜單的各種情況，后端菜單如何按照需要返回?cái)?shù)據(jù)，咱們繼續(xù)～

2. 菜單表

首先我們來(lái)看看菜單表的定義，也就是 sys_menu。

CREATE TABLE `sys_menu` (
  `menu_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '菜單ID',
  `menu_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '菜單名稱',
  `parent_id` bigint(20) DEFAULT '0' COMMENT '父菜單ID',
  `order_num` int(4) DEFAULT '0' COMMENT '顯示順序',
  `path` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '路由地址',
  `component` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '組件路徑',
  `query` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '路由參數(shù)',
  `is_frame` int(1) DEFAULT '1' COMMENT '是否為外鏈（0是 1否）',
  `is_cache` int(1) DEFAULT '0' COMMENT '是否緩存（0緩存 1不緩存）',
  `menu_type` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '菜單類型（M目錄 C菜單 F按鈕）',
  `visible` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '菜單狀態(tài)（0顯示 1隱藏）',
  `status` char(1) COLLATE utf8mb4_unicode_ci DEFAULT '0' COMMENT '菜單狀態(tài)（0正常 1停用）',
  `perms` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '權(quán)限標(biāo)識(shí)',
  `icon` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '菜單圖標(biāo)',
  `create_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '創(chuàng)建者',
  `create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時(shí)間',
  `update_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新時(shí)間',
  `remark` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '備注',
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3054 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='菜單權(quán)限表';

其實(shí)這里很多字段都和我們 vhr 項(xiàng)目項(xiàng)目很相似，我也就不重復(fù)啰嗦了，我這里主要和小伙伴們說(shuō)一個(gè)字段，那就是 menu_type。

menu_type 表示一個(gè)菜單字段的類型，一個(gè)菜單有三種類型，分別是目錄（M）、菜單（C）以及按鈕（F）。這里所說(shuō)的目錄，相當(dāng)于我們?cè)?vhr 中所說(shuō)的一級(jí)菜單，菜單相當(dāng)于我們?cè)?vhr 中所說(shuō)的二級(jí)菜單。

當(dāng)用戶從前端登錄成功后，要去動(dòng)態(tài)加載的菜單的時(shí)候，就查詢 M 和 C 類型的數(shù)據(jù)即可，F(xiàn) 類型的數(shù)據(jù)不是菜單項(xiàng)，查詢的時(shí)候直接過(guò)濾掉即可，通過(guò) menu_type 這個(gè)字段可以輕松的過(guò)濾掉 F 類型的數(shù)據(jù)。小伙伴們想想，F(xiàn) 類型的數(shù)據(jù)過(guò)濾掉之后，剩下的數(shù)據(jù)不就是一級(jí)菜單和二級(jí)菜單了，那不就和 vhr 又一樣了么！

在 vhr 中，考慮到菜單就是只有兩級(jí)：一級(jí)菜單和二級(jí)菜單，一級(jí)菜單是目錄，二級(jí)菜單是則是具體的菜單項(xiàng)，沒(méi)有三級(jí)菜單！所以在 vhr 中，查詢菜單的時(shí)候我直接用了一個(gè)一對(duì)多的查詢，將一級(jí)菜單做一的一方，二級(jí)菜單做多的一方，這樣比較省事。當(dāng)然靈活度差一點(diǎn)，所以在 TienChin 項(xiàng)目中，這塊還是用上了遞歸。

3. 前端菜單展示

接下來(lái)，前端菜單展示分為了幾種情況？這個(gè)前文中已經(jīng)和大家聊過(guò)了，這里不再贅述。

4. 菜單接口

當(dāng)用戶登錄成功之后，會(huì)自動(dòng)請(qǐng)求 /getRouters 接口來(lái)獲取菜單信息，我們一起來(lái)看下：

/**
 * 獲取路由信息
 *
 * @return 路由信息
 */
@GetMapping("getRouters")
public AjaxResult getRouters() {
    Long userId = SecurityUtils.getUserId();
    List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
    return AjaxResult.success(menuService.buildMenus(menus));
}

這里的查詢實(shí)際上分為兩個(gè)步驟：

根據(jù)用戶 id 查詢到所有的菜單信息，這一步的查詢實(shí)際上是比較容易的，就單純的多張表聯(lián)合在一起，然后過(guò)濾出和當(dāng)前用戶相關(guān)并且菜單類型為 M 或者 C 的菜單（類型為 F 的表示按鈕，就不要了），查詢到菜單信息之后，然后進(jìn)行一個(gè)遞歸操作，將菜單數(shù)據(jù)的層級(jí)排列出來(lái)。
menuService.buildMenus 這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。

一共就這兩個(gè)步驟，我們來(lái)逐一進(jìn)行分析。

先來(lái)看查詢菜單數(shù)據(jù)。

/**
 * 根據(jù)用戶ID查詢菜單
 *
 * @param userId 用戶名稱
 * @return 菜單列表
 */
@Override
public List<SysMenu> selectMenuTreeByUserId(Long userId) {
    List<SysMenu> menus = null;
    if (SecurityUtils.isAdmin(userId)) {
        menus = menuMapper.selectMenuTreeAll();
    } else {
        menus = menuMapper.selectMenuTreeByUserId(userId);
    }
    return getChildPerms(menus, 0);
}
/**
 * 根據(jù)父節(jié)點(diǎn)的ID獲取所有子節(jié)點(diǎn)
 *
 * @param list     分類表
 * @param parentId 傳入的父節(jié)點(diǎn)ID
 * @return String
 */
public List<SysMenu> getChildPerms(List<SysMenu> list, int parentId) {
    List<SysMenu> returnList = new ArrayList<SysMenu>();
    for (Iterator<SysMenu> iterator = list.iterator(); iterator.hasNext(); ) {
        SysMenu t = (SysMenu) iterator.next();
        // 一、根據(jù)傳入的某個(gè)父節(jié)點(diǎn)ID,遍歷該父節(jié)點(diǎn)的所有子節(jié)點(diǎn)
        if (t.getParentId() == parentId) {
            recursionFn(list, t);
            returnList.add(t);
        }
    }
    return returnList;
}
/**
 * 遞歸列表
 *
 * @param list
 * @param t
 */
private void recursionFn(List<SysMenu> list, SysMenu t) {
    // 得到子節(jié)點(diǎn)列表
    List<SysMenu> childList = getChildList(list, t);
    t.setChildren(childList);
    for (SysMenu tChild : childList) {
        if (hasChild(list, tChild)) {
            recursionFn(list, tChild);
        }
    }
}
/**
 * 得到子節(jié)點(diǎn)列表
 */
private List<SysMenu> getChildList(List<SysMenu> list, SysMenu t) {
    List<SysMenu> tlist = new ArrayList<SysMenu>();
    Iterator<SysMenu> it = list.iterator();
    while (it.hasNext()) {
        SysMenu n = (SysMenu) it.next();
        if (n.getParentId().longValue() == t.getMenuId().longValue()) {
            tlist.add(n);
        }
    }
    return tlist;
}
/**
 * 判斷是否有子節(jié)點(diǎn)
 */
private boolean hasChild(List<SysMenu> list, SysMenu t) {
    return getChildList(list, t).size() > 0;
}

這里一共涉及到五個(gè)關(guān)鍵方法，我們來(lái)逐一進(jìn)行分析：

selectMenuTreeByUserId：這個(gè)方法的執(zhí)行比較容易，如果當(dāng)前用戶是管理員，那就不用加過(guò)濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項(xiàng)即可。
getChildPerms：這個(gè)方法主要是將前面查詢出來(lái)的菜單數(shù)據(jù)進(jìn)行重組，本來(lái)都是一個(gè)集合中的數(shù)據(jù)，現(xiàn)在在該方法中處理成樹(shù)狀，處理的核心邏輯就是調(diào)用 recursionFn 方法將之進(jìn)行遞歸。
recursionFn：這是最為關(guān)鍵的遞歸方法了，首先調(diào)用 getChildList 獲取當(dāng)前菜單項(xiàng)的 children，然后將獲取到的 children 設(shè)置給當(dāng)前菜單項(xiàng)，最后還要遍歷獲取到的 children，如果這個(gè) children 也是有子菜單的，則繼續(xù)調(diào)用 recursionFn 方法進(jìn)行處理。
getChildList：這個(gè)是查詢某一個(gè)菜單的子菜單，這個(gè)很容易，如果某一個(gè)菜單的 parentId 是當(dāng)前菜單的 id，那么這個(gè)菜單就是當(dāng)前菜單的子菜單。
hasChild：這個(gè)是判斷給定的菜單是否有子菜單，這個(gè)邏輯就比較簡(jiǎn)單了。

好啦，這個(gè)就是整個(gè)的查詢邏輯，整體上來(lái)說(shuō)是比較容易的，就是查詢 M 和 C 類型的菜單，然后再做一個(gè)遞歸操作，將菜單數(shù)據(jù)變成一個(gè)樹(shù)狀數(shù)據(jù)。

但是因?yàn)?SysMenu 和前后端所需要的路由數(shù)據(jù)的字段名稱對(duì)不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個(gè)轉(zhuǎn)換，這就是 menuService.buildMenus 所做的事情了，在分析 menuService.buildMenus 方法之前，再來(lái)捋一捋菜單的四種情況，我們先來(lái)回顧下四種菜單格式：

[{
	"name": "Monitor",
	"path": "/monitor",
	"hidden": false,
	"redirect": "noRedirect",
	"component": "Layout",
	"alwaysShow": true,
	"meta": {
		"title": "系統(tǒng)監(jiān)控",
		"icon": "monitor",
		"noCache": false,
		"link": null
	},
	"children": [{
		"name": "Online",
		"path": "online",
		"hidden": false,
		"component": "monitor/online/index",
		"meta": {
			"title": "在線用戶",
			"icon": "online",
			"noCache": false,
			"link": null
		}
	}, {
		"name": "Job",
		"path": "job",
		"hidden": false,
		"component": "monitor/job/index",
		"meta": {
			"title": "定時(shí)任務(wù)",
			"icon": "job",
			"noCache": false,
			"link": null
		}
	}]
}, {
	"path": "/",
	"hidden": false,
	"component": "Layout",
	"children": [{
		"name": "Role",
		"path": "role",
		"hidden": false,
		"component": "system/role/index",
		"meta": {
			"title": "角色管理",
			"icon": "peoples",
			"noCache": false,
			"link": null
		}
	}]
},{
    "name": "Http://www.javaboy.org",
    "path": "http://www.javaboy.org",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": "http://www.javaboy.org"
    }
},{
    "name": "Http://www.javaboy.org",
    "path": "/",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": null
    },
    "children": [
        {
            "name": "Www.javaboy.org",
            "path": "www.javaboy.org",
            "hidden": false,
            "component": "InnerLink",
            "meta": {
                "title": "TienChin健身官網(wǎng)",
                "icon": "guide",
                "noCache": false,
                "link": "http://www.javaboy.org"
            }
        }
    ]
}]

這四種菜單 JSON，從上往下顯示效果依次是：

一級(jí)菜單中有二級(jí)菜單，一級(jí)菜單不可點(diǎn)擊，二級(jí)菜單點(diǎn)擊后在右邊打開(kāi)相應(yīng)的頁(yè)面。
只有一個(gè)一級(jí)菜單，點(diǎn)擊之后，右邊打開(kāi)相應(yīng)的頁(yè)面。
一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在新的選項(xiàng)卡中打開(kāi)新的頁(yè)面。
一個(gè)外鏈（只有一級(jí)菜單），點(diǎn)擊之后，在當(dāng)前系統(tǒng)中打開(kāi)新的頁(yè)面（第三方頁(yè)面通過(guò) iframe 標(biāo)簽出現(xiàn)在當(dāng)前系統(tǒng)中）。

牢記這四種不同的菜單情況，再來(lái)看 buildMenus 方法，就會(huì)容易很多了（下文我說(shuō)菜單 1、2、3、4 分別對(duì)應(yīng)上面的四種情況）：

/**
 * 構(gòu)建前端路由所需要的菜單
 *
 * @param menus 菜單列表
 * @return 路由列表
 */
@Override
public List<RouterVo> buildMenus(List<SysMenu> menus) {
    List<RouterVo> routers = new LinkedList<RouterVo>();
    for (SysMenu menu : menus) {
        RouterVo router = new RouterVo();
        router.setHidden("1".equals(menu.getVisible()));
        router.setName(getRouteName(menu));
        router.setPath(getRouterPath(menu));
        router.setComponent(getComponent(menu));
        router.setQuery(menu.getQuery());
        router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
        List<SysMenu> cMenus = menu.getChildren();
        if (!cMenus.isEmpty() && cMenus.size() > 0 && UserConstants.TYPE_DIR.equals(menu.getMenuType())) {
            router.setAlwaysShow(true);
            router.setRedirect("noRedirect");
            router.setChildren(buildMenus(cMenus));
        } else if (isMenuFrame(menu)) {
            router.setMeta(null);
            List<RouterVo> childrenList = new ArrayList<RouterVo>();
            RouterVo children = new RouterVo();
            children.setPath(menu.getPath());
            children.setComponent(menu.getComponent());
            children.setName(StringUtils.capitalize(menu.getPath()));
            children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), StringUtils.equals("1", menu.getIsCache()), menu.getPath()));
            children.setQuery(menu.getQuery());
            childrenList.add(children);
            router.setChildren(childrenList);
        } else if (menu.getParentId().intValue() == 0 && isInnerLink(menu)) {
            router.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon()));
            router.setPath("/");
            List<RouterVo> childrenList = new ArrayList<RouterVo>();
            RouterVo children = new RouterVo();
            String routerPath = innerLinkReplaceEach(menu.getPath());
            children.setPath(routerPath);
            children.setComponent(UserConstants.INNER_LINK);
            children.setName(StringUtils.capitalize(routerPath));
            children.setMeta(new MetaVo(menu.getMenuName(), menu.getIcon(), menu.getPath()));
            childrenList.add(children);
            router.setChildren(childrenList);
        }
        routers.add(router);
    }
    return routers;
}

這個(gè)方法一個(gè)核心思想就是格式轉(zhuǎn)換，其他的都沒(méi)啥，不過(guò)看似簡(jiǎn)單的邏輯里邊，其實(shí)也隱藏了很多實(shí)現(xiàn)細(xì)節(jié)。

這個(gè)方法細(xì)看的話，會(huì)有很多地方感覺(jué)比較繞。但是，小伙伴們仔細(xì)回顧一下在該文章中，松哥將前端展示出來(lái)的菜單分為了四種情況，根據(jù)那四種顯示的情況，再來(lái)看這里的數(shù)據(jù)組裝邏輯，就很好懂了。

首先我們來(lái)看 router 基本屬性的設(shè)置：

首先是可見(jiàn)性 hidden，這個(gè)沒(méi)啥好說(shuō)的。
接下來(lái)是菜單的 name 屬性，name 屬性分為了兩種情況：路由的 name 屬性是菜單表中的 path 字段值且首字母大寫(xiě)（菜單 1、3、4）；如果在一級(jí)菜單中，出現(xiàn)了一個(gè)菜單 C（本來(lái)這一級(jí)別只有 M），并且還不是外鏈，那么就設(shè)置菜單的 name 為空字符串（相當(dāng)于此時(shí)不需要 name 屬性了，對(duì)應(yīng)菜單 2 的情況）。
接下來(lái)是路由的 path，設(shè)置 path 的時(shí)候也分好種情況，松哥對(duì)照著代碼來(lái)和大家說(shuō)一下：

/**
 * 獲取路由地址
 *
 * @param menu 菜單信息
 * @return 路由地址
 */
public String getRouterPath(SysMenu menu) {
    String routerPath = menu.getPath();
    // 內(nèi)鏈打開(kāi)外網(wǎng)方式
    if (menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
        routerPath = innerLinkReplaceEach(routerPath);
    }
    // 非外鏈并且是一級(jí)目錄（類型為目錄）
    if (0 == menu.getParentId().intValue() && UserConstants.TYPE_DIR.equals(menu.getMenuType())
            && UserConstants.NO_FRAME.equals(menu.getIsFrame())) {
        routerPath = "/" + menu.getPath();
    }
    // 非外鏈并且是一級(jí)目錄（類型為菜單）
    else if (isMenuFrame(menu)) {
        routerPath = "/";
    }
    return routerPath;
}

a. 首先獲取從數(shù)據(jù)庫(kù)中查詢到的 path 屬性。 b. 如果當(dāng)前組件不是一級(jí)菜單，并且是在內(nèi)部組件中展示，那么除去這個(gè) path 里邊的 http 或者 https（對(duì)應(yīng)菜單 4 的 children 的情況）。 c. 如果當(dāng)前組件是一級(jí)菜單并且是 M 型并且不是外鏈，那么就在原有的 path 上加上 / 前綴（對(duì)應(yīng)菜單 1 的一級(jí)菜單的 path 情況）。 d. 如果當(dāng)前組件是一級(jí)菜單，且是 C 型菜單，那么設(shè)置 path 為 /（對(duì)應(yīng)菜單 2、4 中一級(jí)菜單的 path 情況）。 e. 其他情況，菜單都是從數(shù)據(jù)庫(kù)查到什么返回什么。

接下來(lái)是設(shè)置前端 component，這個(gè)菜單項(xiàng)用哪個(gè) component 組件顯示出來(lái)。

/**
 * 獲取組件信息
 *
 * @param menu 菜單信息
 * @return 組件信息
 */
public String getComponent(SysMenu menu) {
    String component = UserConstants.LAYOUT;
    if (StringUtils.isNotEmpty(menu.getComponent()) && !isMenuFrame(menu)) {
        component = menu.getComponent();
    } else if (StringUtils.isEmpty(menu.getComponent()) && menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
        component = UserConstants.INNER_LINK;
    } else if (StringUtils.isEmpty(menu.getComponent()) && isParentView(menu)) {
        component = UserConstants.PARENT_VIEW;
    }
    return component;
}

a. 首先默認(rèn)的組件是 Layout（菜單1、2、3、4 的一級(jí)菜單）。 b. 如果配置的時(shí)候就有 component，并且當(dāng)前菜單項(xiàng)也不是外鏈，那么就使用配置的 component（菜單 1、2 的子菜單情況）。 c. 如果不是一級(jí)菜單（是一個(gè)子菜單），并且是一個(gè)在當(dāng)前系統(tǒng)展示的外鏈，那么就使用 InnerLink 這個(gè)組件（這個(gè)組件中有一個(gè) iframe 標(biāo)簽可以把外鏈展示出來(lái)，如菜單 4 的子菜單情況）。 d. 如果配置的時(shí)候沒(méi)有設(shè)置組件并且菜單類型是 M（二級(jí)菜單中還有三級(jí)菜單的情況），那么就設(shè)置顯示組件為 ParentView。

component 就分為這幾種情況。

接下來(lái)就是 query 和 meta 這兩個(gè)參數(shù)就沒(méi)啥好說(shuō)的。

接下來(lái)就是三個(gè)分支的情況了。

首先第一個(gè) if，處理的就是常規(guī)情況，一級(jí)菜單中有二級(jí)菜單的情況（對(duì)應(yīng)菜單 1 的一級(jí)菜單情況）。
第二個(gè)分支處理一級(jí) C 型菜單是非外鏈的情況（對(duì)應(yīng)菜單 2 的情況），此時(shí)自動(dòng)給該菜單項(xiàng)加上一個(gè) children。
第三個(gè)分支是處理一級(jí) M 型菜單是外鏈的情況（對(duì)應(yīng)菜單 4 的情況），此時(shí)自動(dòng)給該菜單加上一個(gè) children。
如果三個(gè)分支都不進(jìn)去，實(shí)際上就是菜單 3 的情況了。

好啦，這就是菜單接口分析的全部?jī)?nèi)容了，有點(diǎn)繞

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

更多關(guān)于Vue 多級(jí)菜單設(shè)計(jì)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: