專業(yè)級Vue?多級菜單設計
引言
老生常談了！
今天我想來和大家聊聊這個前端的動態(tài)菜單，要如何設計才顯得專業(yè)！還是以我們的 TienChin 項目為例，大家一起來看看。
先來一張截圖看看效果：
那么這樣的菜單是如何設計出來的呢？
今天我也不想和大家聊過多的技術細節(jié)，就聊聊這個路由是如何設計的，一旦大家明白了路由是如何設計的，剩下的問題都是細枝末節(jié)的問題了。
1. 路由設計
有的小伙伴做過 vhr，知道 vhr 里的動態(tài)菜單實現(xiàn)方式，松哥和大家一樣，也是在不斷學習不斷進步中，今天我想和大家探討 TienChin 項目中動態(tài)菜單的實現(xiàn)方案，看看是否是一種更佳的解決方案。
1.1 菜單設計
先來和小伙伴們回顧下 vhr 中的方案：
在 vhr 中，權限的控制，只控制到二級菜單，也就是一級菜單和權限沒關系。舉個例子，現(xiàn)在有一級菜單 A 和 二級菜單 B，B 是 A 中的菜單，現(xiàn)在假設：
- 如果當前用戶權限可以查看 B 菜單，那么 A 菜單會自動顯示出來。
- 如果當前用戶權限無法查看 B 菜單，且 A 菜單中也沒有其他子菜單可以展示，那么 A 菜單就不會顯示出來。
換言之，A 菜單顯示與否，主要看它里邊有沒有子菜單需要展示，如果有，A 菜單就顯示，如果沒有，A 菜單就不顯示。
vhr 中的思路是這樣的。
在 TienChin 項目中，這一塊有一些變化：
如果 A 中只有一個 B，那么似乎就沒有必要再做一個兩級菜單了，直接把 B 展示出來不就行了？用戶操作也方便！
這是第一個不一樣的地方。
1.2 路由數(shù)據(jù)
基于第一點，就涉及到一個問題，就是路由接口該如何設計？最主要是接口返回的數(shù)據(jù)格式應該是什么樣子的？
首先有一點小伙伴們應該知道，這里的路由是一個嵌套路由，也就是一級菜單中嵌套著二級菜單。即使這個地方在展示的時候，不存在層級關系，例如上圖中的促銷活動，但是底層的數(shù)據(jù)結(jié)構也應該是嵌套路由。
好啦，不賣關子了，我們來看一段路由 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": "定時任務",
"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
}
}]
}]
這里我舉了兩個菜單的例子，這兩個例子比較具有代表性，這個菜單最終顯示效果大概類似下面這樣：
系統(tǒng)監(jiān)控
- 在線用戶
- 定時任務
角色管理
大概顯示效果如上圖。
接下來我就來說一下這里幾個典型屬性：
- redirect：noRedirect 表示該路由在面包屑導航中不可被點擊。
- alwaysShow：如果這個屬性設置為 false，那么當當前菜單只有一個子菜單的時候，默認情況下就只會顯示子菜單，而忽略父菜單（如 1.1 小節(jié)所述），但是如果將該屬性設置為 true，則無論當前菜單有幾個子菜單，都會將當前菜單展示出來（這就類似于 vhr 中的效果了）。
- 每一個父菜單都有自己的 path，每一個 children 也有自己的 path，父菜單的 path 加上每一個 children 的 path，共同組成每一個 children 的路徑。
- 再來看第二個角色管理這個菜單項，由于它的父菜單中只有一個子菜單項，并且父菜單中也沒有 alwaysShow 屬性，所以這個菜單項在最終展示的時候，就只展示里邊的角色管理，父菜單則不會展示出來（正好，生成的 JSON 中也沒說父菜單的名字、圖標等屬性）。
當然，不是說你的 JSON 這么寫就自動這么顯示，JSON 中的東西只是一個標記，最終怎么顯示，還要看渲染：
<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>
還有一個函數(shù)我就沒有列出來了，反正我們看名字也大概知道每一個函數(shù)的含義。
大家看，這個 div 中實際上分為了兩部分，上面 template 專門用來處理 children 中只有一項的情況（角色管理），具體處理方式就是把 children 拿出來顯示，其他的則不考慮，具體執(zhí)行的時候不一定是只有一個 children，也有可能壓根就沒有 children，此時直接顯示 parent 即可（參考 1.3 小節(jié)）。
下面的 el-submenu 則處理 children 有多個的情況（系統(tǒng)監(jiān)控）。
另外這里涉及到了一個 resolvePath，也是特別關鍵的一個方法，我們來大致看下：
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)
}
這個函數(shù)的主要左右，就是處理菜單的路徑問題。
我們來看下這個具體的判斷邏輯：
- 如果這個菜單的路徑是一個外鏈（判斷邏輯是查看這個 path 是否有 http 或者 https 等前綴），即 isExternal 返回 true，就把這個路徑原封不動返回。
- 如果這個菜單的父菜單的路徑是一個外鏈，則將父菜單的 path 原封不懂返回。
- 如果有查詢參數(shù)，就把參數(shù)加上。
- 最后通過 path.resolve 對路徑進行一個簡單運算。
有的小伙伴可能對 path.resolve 不熟悉，我簡單說下：
path.resolve() 方法可以將多個路徑解析為一個規(guī)范化的絕對路徑，它的處理方式類似于對這些路徑逐一進行 cd 操作，然而與 cd 操作不同的是，這些路徑可以是文件，并且可不必實際存在（resolve() 方法不會利用底層的文件系統(tǒng)判斷路徑是否存在，而只是進行路徑字符串操作）。例如：
path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')
相當于：
cd foo/bar cd /tmp/file/ cd .. cd a/../subfile pwd
舉個簡單的例子：
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')
// 當前的工作路徑是 /home/javaboy/node，則輸出結(jié)果為
'/home/javaboy/node/wwwroot/static_files/gif/image.gif'
現(xiàn)在大家知道菜單跳轉(zhuǎn)的路徑是怎么來的了吧！
1.3 外鏈問題
在 TienChin 項目中，菜單還存在一個外鏈的問題。
這個外鏈有兩種不同的顯示思路：
- 點擊外鏈，直接打開一個新的選項卡，在新的選項卡中展示新的頁面。
- 點擊外鏈，在當前項目中打開一個新的選項卡，選項卡中展示新的內(nèi)容。
對于第一種情況我就不和大家演示了，對于第二種情況，我截個圖給大家看下：
就是在當前項目的選項卡中，展示一個外部鏈接的內(nèi)容。
我們先來看第一種情況。即點擊菜單之后，就在一個新的選項卡中打開網(wǎng)頁，這種菜單的 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"
}
}
這個大家看，也沒有 children，因為不需要，這個顯示的時候，就當成了只有一個 children 來處理，然后菜單項的 path 是一個 http 路徑，一點擊，自然就跳到新的選項卡了。
對于第二種情況，即點擊外鏈，在當前項目中打開一個新的選項卡，選項卡中展示鏈接的內(nèi)容，它的 JSON 結(jié)構類似下面這樣：
{
"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"
}
}
]
}
這個其實也沒啥好說的，類似于上面系統(tǒng)監(jiān)控的那種情況，但是只有一個子菜單，在菜單渲染的時候，也是只渲染一個子菜單。由于父子菜單的 path 都不是以 http 或者 https 之類的地址開頭，所以這個鏈接最終生成的 path 是 /www.javaboy.org，然后這個路徑的內(nèi)容將展示在 InnerLink 組件上，最終就是大家上圖中所看到的效果了。
好啦，這就是前端菜單的各種情況，后端菜單如何按照需要返回數(shù)據(jù)，咱們繼續(xù)～
2. 菜單表
首先我們來看看菜單表的定義，也就是 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 '權限標識', `icon` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT '#' COMMENT '菜單圖標', `create_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '創(chuàng)建者', `create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時間', `update_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者', `update_time` datetime DEFAULT NULL COMMENT '更新時間', `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='菜單權限表';
其實這里很多字段都和我們 vhr 項目項目很相似，我也就不重復啰嗦了，我這里主要和小伙伴們說一個字段，那就是 menu_type。
menu_type 表示一個菜單字段的類型，一個菜單有三種類型，分別是目錄（M）、菜單（C）以及按鈕（F）。這里所說的目錄，相當于我們在 vhr 中所說的一級菜單，菜單相當于我們在 vhr 中所說的二級菜單。
當用戶從前端登錄成功后，要去動態(tài)加載的菜單的時候，就查詢 M 和 C 類型的數(shù)據(jù)即可，F(xiàn) 類型的數(shù)據(jù)不是菜單項，查詢的時候直接過濾掉即可，通過 menu_type 這個字段可以輕松的過濾掉 F 類型的數(shù)據(jù)。小伙伴們想想，F(xiàn) 類型的數(shù)據(jù)過濾掉之后，剩下的數(shù)據(jù)不就是一級菜單和二級菜單了，那不就和 vhr 又一樣了么！
在 vhr 中，考慮到菜單就是只有兩級：一級菜單和二級菜單，一級菜單是目錄，二級菜單是則是具體的菜單項，沒有三級菜單！所以在 vhr 中，查詢菜單的時候我直接用了一個一對多的查詢，將一級菜單做一的一方，二級菜單做多的一方，這樣比較省事。當然靈活度差一點，所以在 TienChin 項目中，這塊還是用上了遞歸。
3. 前端菜單展示
接下來，前端菜單展示分為了幾種情況？這個前文中已經(jīng)和大家聊過了，這里不再贅述。
4. 菜單接口
當用戶登錄成功之后，會自動請求 /getRouters 接口來獲取菜單信息，我們一起來看下：
/**
* 獲取路由信息
*
* @return 路由信息
*/
@GetMapping("getRouters")
public AjaxResult getRouters() {
Long userId = SecurityUtils.getUserId();
List<SysMenu> menus = menuService.selectMenuTreeByUserId(userId);
return AjaxResult.success(menuService.buildMenus(menus));
}
這里的查詢實際上分為兩個步驟：
- 根據(jù)用戶 id 查詢到所有的菜單信息，這一步的查詢實際上是比較容易的，就單純的多張表聯(lián)合在一起，然后過濾出和當前用戶相關并且菜單類型為 M 或者 C 的菜單（類型為 F 的表示按鈕，就不要了），查詢到菜單信息之后，然后進行一個遞歸操作，將菜單數(shù)據(jù)的層級排列出來。
menuService.buildMenus這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。
一共就這兩個步驟，我們來逐一進行分析。
先來看查詢菜單數(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é)點的ID獲取所有子節(jié)點
*
* @param list 分類表
* @param parentId 傳入的父節(jié)點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ù)傳入的某個父節(jié)點ID,遍歷該父節(jié)點的所有子節(jié)點
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é)點列表
List<SysMenu> childList = getChildList(list, t);
t.setChildren(childList);
for (SysMenu tChild : childList) {
if (hasChild(list, tChild)) {
recursionFn(list, tChild);
}
}
}
/**
* 得到子節(jié)點列表
*/
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é)點
*/
private boolean hasChild(List<SysMenu> list, SysMenu t) {
return getChildList(list, t).size() > 0;
}
這里一共涉及到五個關鍵方法，我們來逐一進行分析：
- selectMenuTreeByUserId：這個方法的執(zhí)行比較容易，如果當前用戶是管理員，那就不用加過濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項即可。
- getChildPerms：這個方法主要是將前面查詢出來的菜單數(shù)據(jù)進行重組，本來都是一個集合中的數(shù)據(jù)，現(xiàn)在在該方法中處理成樹狀，處理的核心邏輯就是調(diào)用 recursionFn 方法將之進行遞歸。
- recursionFn：這是最為關鍵的遞歸方法了，首先調(diào)用 getChildList 獲取當前菜單項的 children，然后將獲取到的 children 設置給當前菜單項，最后還要遍歷獲取到的 children，如果這個 children 也是有子菜單的，則繼續(xù)調(diào)用 recursionFn 方法進行處理。
- getChildList：這個是查詢某一個菜單的子菜單，這個很容易，如果某一個菜單的 parentId 是當前菜單的 id，那么這個菜單就是當前菜單的子菜單。
- hasChild：這個是判斷給定的菜單是否有子菜單，這個邏輯就比較簡單了。
好啦，這個就是整個的查詢邏輯，整體上來說是比較容易的，就是查詢 M 和 C 類型的菜單，然后再做一個遞歸操作，將菜單數(shù)據(jù)變成一個樹狀數(shù)據(jù)。
但是因為 SysMenu 和前后端所需要的路由數(shù)據(jù)的字段名稱對不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個轉(zhuǎn)換，這就是 menuService.buildMenus 所做的事情了，在分析 menuService.buildMenus 方法之前，再來捋一捋菜單的四種情況，我們先來回顧下四種菜單格式：
[{
"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": "定時任務",
"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，從上往下顯示效果依次是：
- 一級菜單中有二級菜單，一級菜單不可點擊，二級菜單點擊后在右邊打開相應的頁面。
- 只有一個一級菜單，點擊之后，右邊打開相應的頁面。
- 一個外鏈（只有一級菜單），點擊之后，在新的選項卡中打開新的頁面。
- 一個外鏈（只有一級菜單），點擊之后，在當前系統(tǒng)中打開新的頁面（第三方頁面通過 iframe 標簽出現(xiàn)在當前系統(tǒng)中）。
牢記這四種不同的菜單情況，再來看 buildMenus 方法，就會容易很多了（下文我說菜單 1、2、3、4 分別對應上面的四種情況）：
/**
* 構建前端路由所需要的菜單
*
* @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;
}
這個方法一個核心思想就是格式轉(zhuǎn)換，其他的都沒啥，不過看似簡單的邏輯里邊，其實也隱藏了很多實現(xiàn)細節(jié)。
這個方法細看的話，會有很多地方感覺比較繞。但是，小伙伴們仔細回顧一下在該文章中，松哥將前端展示出來的菜單分為了四種情況，根據(jù)那四種顯示的情況，再來看這里的數(shù)據(jù)組裝邏輯，就很好懂了。
首先我們來看 router 基本屬性的設置：
- 首先是可見性 hidden，這個沒啥好說的。
- 接下來是菜單的 name 屬性，name 屬性分為了兩種情況：路由的 name 屬性是菜單表中的 path 字段值且首字母大寫（菜單 1、3、4）；如果在一級菜單中，出現(xiàn)了一個菜單 C（本來這一級別只有 M），并且還不是外鏈，那么就設置菜單的 name 為空字符串（相當于此時不需要 name 屬性了，對應菜單 2 的情況）。
- 接下來是路由的 path，設置 path 的時候也分好種情況，松哥對照著代碼來和大家說一下：
/**
* 獲取路由地址
*
* @param menu 菜單信息
* @return 路由地址
*/
public String getRouterPath(SysMenu menu) {
String routerPath = menu.getPath();
// 內(nèi)鏈打開外網(wǎng)方式
if (menu.getParentId().intValue() != 0 && isInnerLink(menu)) {
routerPath = innerLinkReplaceEach(routerPath);
}
// 非外鏈并且是一級目錄（類型為目錄）
if (0 == menu.getParentId().intValue() && UserConstants.TYPE_DIR.equals(menu.getMenuType())
&& UserConstants.NO_FRAME.equals(menu.getIsFrame())) {
routerPath = "/" + menu.getPath();
}
// 非外鏈并且是一級目錄（類型為菜單）
else if (isMenuFrame(menu)) {
routerPath = "/";
}
return routerPath;
}
a. 首先獲取從數(shù)據(jù)庫中查詢到的 path 屬性。 b. 如果當前組件不是一級菜單，并且是在內(nèi)部組件中展示，那么除去這個 path 里邊的 http 或者 https（對應菜單 4 的 children 的情況）。 c. 如果當前組件是一級菜單并且是 M 型并且不是外鏈，那么就在原有的 path 上加上 / 前綴（對應菜單 1 的一級菜單的 path 情況）。 d. 如果當前組件是一級菜單，且是 C 型菜單，那么設置 path 為 /（對應菜單 2、4 中一級菜單的 path 情況）。 e. 其他情況，菜單都是從數(shù)據(jù)庫查到什么返回什么。
- 接下來是設置前端 component，這個菜單項用哪個 component 組件顯示出來。
/**
* 獲取組件信息
*
* @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. 首先默認的組件是 Layout（菜單1、2、3、4 的一級菜單）。 b. 如果配置的時候就有 component，并且當前菜單項也不是外鏈，那么就使用配置的 component（菜單 1、2 的子菜單情況）。 c. 如果不是一級菜單（是一個子菜單），并且是一個在當前系統(tǒng)展示的外鏈，那么就使用 InnerLink 這個組件（這個組件中有一個 iframe 標簽可以把外鏈展示出來，如菜單 4 的子菜單情況）。 d. 如果配置的時候沒有設置組件并且菜單類型是 M（二級菜單中還有三級菜單的情況），那么就設置顯示組件為 ParentView。
component 就分為這幾種情況。
- 接下來就是 query 和 meta 這兩個參數(shù)就沒啥好說的。
接下來就是三個分支的情況了。
- 首先第一個 if，處理的就是常規(guī)情況，一級菜單中有二級菜單的情況（對應菜單 1 的一級菜單情況）。
- 第二個分支處理一級 C 型菜單是非外鏈的情況（對應菜單 2 的情況），此時自動給該菜單項加上一個 children。
- 第三個分支是處理一級 M 型菜單是外鏈的情況（對應菜單 4 的情況），此時自動給該菜單加上一個 children。
- 如果三個分支都不進去，實際上就是菜單 3 的情況了。
好啦，這就是菜單接口分析的全部內(nèi)容了，有點繞
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
更多關于Vue 多級菜單設計的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了?面試問題Vue雙向數(shù)據(jù)綁定原理，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了vue-router子路由的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了使用el-form-item設置標簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了解決vue scoped scss 無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue.js數(shù)據(jù)綁定操作,結(jié)合實例形式詳細分析了vue.js數(shù)據(jù)綁定的各種常見操作技巧與相關注意事項,需要的朋友可以參考下2018-04-04
淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下2022-12-12
watch是Vue實例的一個屬性是用來響應數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11
Vue引入高德地圖并觸發(fā)實現(xiàn)多個標點的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實現(xiàn)多個標點,主要是在public下的index.html中引入地圖，引入組件設置寬高100%，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-05-05
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue項目結(jié)合Vue-layer實現(xiàn)彈框式編輯功能(實例代碼)
這篇文章主要介紹了Vue項目中結(jié)合Vue-layer實現(xiàn)彈框式編輯功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03