SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理

更新時(shí)間：2022年07月14日 15:14:48 作者：江南一點(diǎn)雨

這篇文章主要為大家詳細(xì)介紹了利用SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下

關(guān)于 Spring Boot + Vue3 的動(dòng)態(tài)菜單，松哥之前已經(jīng)寫了兩篇文章了，這兩篇文章主要是從代碼上和大家分析動(dòng)態(tài)菜單最終的實(shí)現(xiàn)方式，但是還是有小伙伴覺得沒太看明白，感覺缺乏一個(gè)提綱挈領(lǐng)的思路，所以，今天松哥再整一篇文章和大家再來捋一捋這個(gè)問題，希望這篇文章能讓小伙伴們徹底搞清楚這個(gè)問題。

1. 整體思路

首先我們來看整體思路。

光說思路大家還是云里霧里，我們結(jié)合具體的效果圖來看：

最終菜單顯示效果類似上圖，我把這里的菜單分為了四類：

1.有父有子：像系統(tǒng)管理那種，既有父菜單，又有子菜單。

2.只有一個(gè)一級(jí)菜單，這種又細(xì)分為三種情況：

普通的菜單，點(diǎn)擊之后在右邊主頁(yè)面打開某個(gè)功能頁(yè)面。
一個(gè)超鏈接，但不是外鏈，是一個(gè)在當(dāng)前系統(tǒng)中打開的外部網(wǎng)頁(yè)，點(diǎn)擊之后，會(huì)在右邊的主頁(yè)面中新開一個(gè)選項(xiàng)卡，這個(gè)選項(xiàng)卡中顯示的是一個(gè)外部網(wǎng)頁(yè)（本質(zhì)上是通過 iframe 標(biāo)簽引入的一個(gè)外部網(wǎng)頁(yè)）。
一個(gè)超鏈接，并且還是一個(gè)外鏈，點(diǎn)擊之后，直接在瀏覽器中打開一個(gè)新的選項(xiàng)卡，新的選項(xiàng)卡中展示一個(gè)外部鏈接。

整體上來說，就分為這四種情況。其中 1、2.1、2.3 應(yīng)該都好理解，2.2 有的小伙伴可能不清楚，我給大家截個(gè)圖看下就知道了：

四種菜單對(duì)應(yīng)的 JSON 格式分別如下：

1.有父有子：

{
?"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
??}
?}]
}

2.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊后是一個(gè)功能頁(yè)面：

{
?"path":?"/",
?"hidden":?false,
?"component":?"Layout",
?"children":?[{
??"name":?"Role",
??"path":?"role",
??"hidden":?false,
??"component":?"system/role/index",
??"meta":?{
???"title":?"角色管理",
???"icon":?"peoples",
???"noCache":?false,
???"link":?null
??}
?}]
}

3.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在當(dāng)前系統(tǒng)中一個(gè)新的選項(xiàng)卡里打開一個(gè)網(wǎng)頁(yè)：

{
????"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"
????????????}
????????}
????]
}

4.只有一個(gè)一級(jí)菜單，且一級(jí)菜單點(diǎn)擊之后在瀏覽器打開一個(gè)新的選項(xiàng)卡：

{
????"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"
????}
}

根據(jù)以上四種不同的 JSON，我們總結(jié)出以下規(guī)律：

父組件都是 Layout，這里的 Layout 就相當(dāng)于我們 vhr 中的 Home 組件，也就是整個(gè)頁(yè)面的框架。
如果想在當(dāng)前系統(tǒng)中，新開選項(xiàng)卡打開一個(gè)功能項(xiàng)，那么這個(gè)菜單項(xiàng)必然有 children，即使 children 中只有一項(xiàng)菜單。
如果菜單項(xiàng)是一個(gè)外鏈，那么這個(gè)菜單項(xiàng)就不需要有 children 了。
某種程度上，我們其實(shí)可以將 2、3 歸為一類，畢竟 3 只是展示內(nèi)容的組件固定為 InnerLink，2 則視情況而定。
整體上，可以點(diǎn)擊的菜單的 path 都是父菜單的 path + 子菜單的 path，如果菜單項(xiàng)有父有子，那就正常拼接就行了；如果只有一個(gè)子菜單，那么父菜單的 path 就是 /；如果是一個(gè)外鏈，那就只有父菜單的 path 了。

好了，這就是動(dòng)態(tài)菜單的整體設(shè)計(jì)。

2. 前端渲染

接下來我們?cè)賮砜匆豢辞岸说牟藛武秩?，前端的?dòng)態(tài)菜單渲染位于 tienchin-ui/src/layout/components/Sidebar/SidebarItem.vue 文件中：

<template>
??<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?}">
??????????<svg-icon?:icon-class="onlyOneChild.meta.icon?||?(item.meta?&&?item.meta.icon)"/>
??????????<template?#title><span?class="menu-title"?:title="hasTitle(onlyOneChild.meta.title)">{{?onlyOneChild.meta.title?}}</span></template>
????????</el-menu-item>
??????</app-link>
????</template>

????<el-sub-menu?v-else?ref="subMenu"?:index="resolvePath(item.path)"?popper-append-to-body>
??????<template?v-if="item.meta"?#title>
????????<svg-icon?:icon-class="item.meta?&&?item.meta.icon"?/>
????????<span?class="menu-title"?:title="hasTitle(item.meta.title)">{{?item.meta.title?}}</span>
??????</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-sub-menu>
??</div>
</template>

這里涉及到幾個(gè)方法，具體的方法細(xì)節(jié)我就不貼出來了，主要和大家說下實(shí)現(xiàn)思路。

先看整體上，這個(gè)菜單要是非隱藏的，隱藏的菜單，那么直接一級(jí)菜單及其下的子菜單就都不渲染了。
渲染整體上分兩塊，上面的 template 主要是渲染只有一個(gè)子菜單的情況，也就是第一小節(jié)的 2、3、4 三種情況，下面的渲染正常的有父有子的情況，也就是第一小節(jié)的菜單 1。
hasOneShowingChild 主要是判斷這個(gè)菜單項(xiàng)是否只有一個(gè)需要渲染的子菜單，如果有多個(gè)子菜單，但是大部分都是隱藏，只有一個(gè)需要渲染出來，那也算只有一個(gè)子菜單，如果一個(gè)菜單項(xiàng)都沒有子菜單，那也算一個(gè)子菜單，只不過這個(gè)子菜單就是他自身，對(duì)應(yīng)第一小節(jié)第 4 種情況。在判斷的過程中，將唯一需要渲染的菜單的數(shù)據(jù)賦值給 onlyOneChild 變量，那么最終，如果當(dāng)前菜單項(xiàng)只有一個(gè)子菜單，且這個(gè)子菜單沒有子菜單（或者有子菜單但是子菜單不用顯示），并且當(dāng)前菜單也不是必須要渲染的，那就將 onlyOneChild 的數(shù)據(jù)渲染出來。
對(duì)于普通的有父有子的情況，渲染的時(shí)候，通過 el-sub-menu 標(biāo)簽進(jìn)行渲染，但是注意子項(xiàng)是 sidebar-item，sidebar-item 其實(shí)就是當(dāng)前項(xiàng)！換言之，這里的渲染其實(shí)還用到了遞歸（直到?jīng)]有 children 的時(shí)候結(jié)束），這樣即便菜單有三級(jí)四級(jí)五級(jí)等等，只要不嫌難看，都是可以渲染出來的。

3. 后端菜單生成

3.1 菜單表

首先我們來看看菜單表的定義，也就是 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ù)啰嗦了，我這里主要和小伙伴們說一個(gè)字段，那就是 menu_type。

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

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

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

3.2 菜單接口

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

/**
?*?獲取路由信息
?*
?*?@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)合在一起，然后過濾出和當(dāng)前用戶相關(guān)并且菜單類型為 M 或者 C 的菜單（類型為 F 的表示按鈕，就不要了），查詢到菜單信息之后，然后進(jìn)行一個(gè)遞歸操作，將菜單數(shù)據(jù)的層級(jí)排列出來。
menuService.buildMenus 這一步則是將菜單數(shù)據(jù)專為前端所需要的路由數(shù)據(jù)。

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

先來看查詢菜單數(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)鍵方法，我們來逐一進(jìn)行分析：

selectMenuTreeByUserId：這個(gè)方法的執(zhí)行比較容易，如果當(dāng)前用戶是管理員，那就不用加過濾條件了，直接查詢出所有的類型為 M 和 C 的菜單項(xiàng)即可。
getChildPerms：這個(gè)方法主要是將前面查詢出來的菜單數(shù)據(jù)進(jìn)行重組，本來都是一個(gè)集合中的數(shù)據(jù)，現(xiàn)在在該方法中處理成樹狀，處理的核心邏輯就是調(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è)的查詢邏輯，整體上來說是比較容易的，就是查詢 M 和 C 類型的菜單，然后再做一個(gè)遞歸操作，將菜單數(shù)據(jù)變成一個(gè)樹狀數(shù)據(jù)。

但是因?yàn)?SysMenu 和前后端所需要的路由數(shù)據(jù)的字段名稱對(duì)不上，并且格式參數(shù)等都不符合前端的要求，所以還需要再做一個(gè)轉(zhuǎn)換，這就是 menuService.buildMenus 所做的事情了：

/**
?*?構(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è)方法的執(zhí)行邏輯上我們可以看到，這里的菜單數(shù)據(jù)一共分為了四種情況，其實(shí)剛好就和我們第一小節(jié)所介紹的情況相對(duì)應(yīng)。

整體上來看，分支語句外面設(shè)置了組件的最基本的屬性。三個(gè)分支語句：

第一個(gè)分支，處理普通的有父有子的情況。
第二個(gè)分支，處理第一小節(jié)第二種情況。
第三個(gè)分支，處理第一小節(jié)第三種情況。
如果三個(gè)分支都沒進(jìn)去，那就是第一小節(jié)的第四種情況，以及各個(gè)子菜單的情況了。

好了，基于這樣大的思路，再來看各個(gè)屬性的具體設(shè)置，就很容易了。

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

/**
?*?獲取路由地址
?*
?*?@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);
????}
????//?非外鏈并且是一級(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)菜單 3 的 children 的情況）。c. 如果當(dāng)前組件是一級(jí)菜單并且是 M 型并且不是外鏈，那么就在原有的 path 上加上 / 前綴（對(duì)應(yīng)菜單 1 的一級(jí)菜單的 path 情況）。d. 如果當(dāng)前組件是一級(jí)菜單，且是 C 型菜單，那么設(shè)置 path 為 /（對(duì)應(yīng)菜單 2、3 中一級(jí)菜單的 path 情況）。e. 其他情況，菜單都是從數(shù)據(jù)庫(kù)查到什么返回什么。

接下來是設(shè)置前端 component，這個(gè)菜單項(xiàng)用哪個(gè) 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. 首先默認(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)簽可以把外鏈展示出來，如菜單 4 的子菜單情況）。d. 如果配置的時(shí)候沒有設(shè)置組件并且菜單類型是 M（二級(jí)菜單中還有三級(jí)菜單的情況），那么就設(shè)置顯示組件為 ParentView。

component 就分為這幾種情況。

接下來就是 query 和 meta 這兩個(gè)參數(shù)就沒啥好說的。

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

其他屬性都比較容易，我就不啰嗦啦～

到此這篇關(guān)于SpringBoot+Vue實(shí)現(xiàn)動(dòng)態(tài)菜單的思路梳理的文章就介紹到這了,更多相關(guān)SpringBoot Vue動(dòng)態(tài)菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: