有很多網(wǎng)站會涉及到導(dǎo)航欄惩嘉，我自己在開發(fā)中用的是element導(dǎo)航組件，并且自定義事件俄删，給大家分享一下宏怔。
1.使用遞歸方法奏路，無限循環(huán)子級菜單畴椰。
2.使用組件封裝，維護方便鸽粉。
3.使用index作為路由跳轉(zhuǎn)斜脂。
4.結(jié)合后臺動態(tài)渲染。
5.自定義樣式触机，修改默認(rèn)icon帚戳。
6.根據(jù)后臺返回數(shù)據(jù)，動態(tài)設(shè)置默認(rèn)選中儡首。
?1.封裝組件片任。
首先創(chuàng)建好vue之后，在a_module里創(chuàng)建一個存放組件的文件夾蔬胯，因為a_module是存放公共資源以及靜態(tài)文件的对供，當(dāng)然也可以根據(jù)喜好來創(chuàng)建。
2.調(diào)用組件。
在要使用到的頁面中使用 import 引入封裝好的組件产场，components初始化一下鹅髓，在頁面中使用。
注意：這里需要注意的是京景，在引用的頁面中一定要el-menu包裹起來窿冯，可以在el-menu標(biāo)簽里來配置側(cè)邊欄的各種狀態(tài)。
3.組件傳值
?我是后臺拿到的數(shù)據(jù)确徙，當(dāng)然也可以自定義數(shù)據(jù)醒串，在引用組建的頁面內(nèi)創(chuàng)建，在子組件標(biāo)簽上邊自定義事件鄙皇，在子組件用props接收參數(shù)厦凤。
?4.el-menu配置
這里呢，需要在父組件內(nèi)配置側(cè)邊欄的各種狀態(tài)育苟，選中狀態(tài)啦较鼓，index路由跳轉(zhuǎn)啦，等等违柏。
? 這里呢博烂，我主要配置了，router：開啟index跳轉(zhuǎn)路由漱竖，default-active:默認(rèn)選中禽篱，這里呢我做了很多判斷，大家可以根據(jù)實際情況來做處理馍惹，我主要是拿到當(dāng)前地址躺率，來做選中狀態(tài)。active-text-color:配置字體顏色万矾，等等
5.子組件遞歸悼吱，無限循環(huán)子級
我呢用的是遞歸的方法，他的原理呢就是自己調(diào)用自己良狈。
?注意看紅色框中的內(nèi)容后添，
（1）.大家可以看到，我在跟標(biāo)簽里邊寫了一個：class薪丁，主要原因就是遇西，但你循環(huán)自己的時候，設(shè)置css樣式只會生效一次严嗜，這個可以解決這個問題粱檀。
（2）.然后呢，根據(jù)數(shù)據(jù)結(jié)構(gòu)漫玄，循環(huán)父組件傳遞過來的參數(shù)茄蚯，如果沒有children的話，循環(huán)下邊的代碼，不調(diào)用子級第队，如果有children的話證明有子級菜單哮塞，那么調(diào)用上邊代碼。
（3）.大家可以看到在label標(biāo)簽里我又調(diào)用了自己忆畅，然后傳遞參數(shù)如失，這里就是遞歸脆丁，如果滿足條件就無線調(diào)用自己。
（4）.這里呢我用了自定義圖標(biāo)震蒋，大家可以觀察我的布局梗搅。
（5）.到這里已經(jīng)差不多了丐枉，但是要注意的是弯院，:index椅挣，接受的是字符串形式的值量九，所以這里比較坑适掰，需要的話可以用String（）轉(zhuǎn)化一下。
（6）.至于圖片里getImgUrl()方法荠列，是解決圖片異步的一種方法攻谁。
?6.默認(rèn)樣式
很多框架的默認(rèn)樣式是很難修改的，大家可以在頁面中去找的class類名去修改弯予，我用的是 /deep/ 這個是一個深度修飾符 或者是 >>> ,當(dāng)然也可以在跟文件里去修改樣式戚宦，但是我不建議這樣去做，因為會他是全局修改锈嫩，容易影響其他頁面的樣式受楼。
差不多就是這些了，樣式的以及源碼我在下邊給大家附上呼寸。
父組件：
html：
<el-menu
:router="true"
:default-active="(this.$route.meta[0].meta&&this.$route.meta[0].meta[0].path&&!this.$route.meta[0].meta[0].ispath)?this.$route.meta[0].meta[0].path:this.$route.meta[0].path"
active-text-color="#ffffff"
:unique-opened="true"
background-color="#00bfb8"
>
<menutree :data="navigation" class="hr_one"></menutree>
<!-- 側(cè)邊導(dǎo)航組件 -->
</el-menu>
css：
.el-aside::-webkit-scrollbar {
width: 4px;
background: #00d2ca;
}
.el-aside::-webkit-scrollbar-thumb {
background: #009d97;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.el-main::-webkit-scrollbar {
display: none;
}
.el-aside {
text-align: center;
position: absolute;
top: 80px;
bottom: 0;
left: 0;
background-color: #00bfb8 !important;
min-height: 800px;
.el-menu-item-group /deep/.el-menu-item-group__title {
padding: 0 !important;
}
.el-menu-item:hover {
background-color: #00d2ca;
}
.child_li {
color: #ffff;
display: flex;
align-items: center;
padding: 0;
span:first-child {
margin-left: 23px;
}
span:last-child {
margin-left: 23px;
}
}
}
josn：
這個數(shù)據(jù)呢艳汽，是我自己模擬的數(shù)據(jù)
navigation: [
{
?id:0,
?name: "首頁",
?path: "/Hr-index/home",
icon: "icon_hrIndex.png"
?},
?{
?id:1,
?name: "教職工檔案",
path: "/Hr-index/staffFiles",
icon: "icon_staffFiles.png"
},
?{
?id:2,
?name: "招聘信息",
?path: "",
?icon: "icon_hrJion.png",
?children: [
?{ id: 122, name: "招聘申請", path: "/Hr-index/zpApply" },
?{ id: 123, name: "招聘審核", path: "/Hr-index/zpCheck" },
?{ id: 124, name: "結(jié)果統(tǒng)計", path: "/Hr-index/resultInfo" }
?]
?},
?{
?id: 10,
?name: "解聘信息",
?path: "",
?icon: "icon_hrunBind.png",
?children: [
?{ id: 119, name: "解聘信息", path: "/Hr-index/decruitment" },
?{ id: 121, name: "解聘教師端", path: "/Hr-index/jpteacher" }
?]
?},
?{
?id: 3,
?name: "勞資管理",
?path: "",
?icon: "icon_hrLabour.png",
?children: [
?{ id: 117, name: "勞資詳情", path: "/Hr-index/labour/details" },
?{
?id: 118,
?name: "崗位勞資設(shè)定",
?path: "/Hr-index/labour/setting"
?}
?]
?},
?{
?id: 4,
?name: "考勤管理",
?path: "/Hr-index/check/manage",
?icon: "icon_manage.png"
?},
?{
?id: "5",
?name: "培訓(xùn)管理",
?path: "/Hr-index/modlifyift",
?icon: "icon_modifyift.png"
?},
?{
?id: "6",
?name: "離崗創(chuàng)業(yè)管理",
?path: "/Hr-index/Quit",
?icon: "icon_dimission.png"
?},
?{
?id: "7",
?name: "護照管理",
?icon: "icon_Passport.png",
?path: "/Hr-index/Passport"
?},
?{
?id: "8",
?name: "權(quán)限管理",
?icon: "icon_jurisdiction_li.png",
?path: "",
?children: [
?{ id: "115", name: "人員管理", path: "/Hr-index/Jurisdiction_set" },
?{ id: "116", name: "角色管理", path: "/Hr-index/Jurisdiction_role" }
?]
?},
?{
?id: "11",
?name: "院系專業(yè)管理",
?path: "/Hr-index/yxhome",
?icon: "icon_yxhome.png"
?},
?{
?id: "",
?name: "課程管理",
?path: "/Hr-index/KcAdministration",
?icon: "icon_KcAdministration.png"
?},
?{
?id: "9",
?name: "個人信息",
?icon: "icon_Personal_li.png",
?path: "",
?children: [
?{
?id: "111",
?name: "個人檔案rerwerwerwerwerwerwerwerwerwerwerwerwerwerwerwer",
?path: "/Hr-index/Personal_file"
?},
?{ id: "112", name: "個人考勤", path: "/Hr-index/Personal_check" },
?{ id: "113", name: "勞資詳情", path: "/Hr-index/Personal_labour" },
?{ id: "114", name: "培訓(xùn)詳情", path: "/Hr-index/Personal_train" }
?]
?}
], //導(dǎo)航數(shù)組
子組件：
html：
<div class="menutree" :class="[calssName]">
<div class>
<label v-for="menu in data" :key="menu.index">
<el-submenu :index="String(menu.id)" v-if="menu.children!=''">
<!-- <el-submenu :index="String(menu.id)" v-if="menu.children"> -->
<template slot="title">
<img :src="getImgUrl(menu.icon)" alt v-if="menu.icon" />
<span>{{menu.name}}</span>
</template>
<label>
<menutree :data="menu.children" :calssName="calssName"></menutree>
</label>
</el-submenu>
<el-menu-item :index="menu.path" v-else>
<img :src="getImgUrl(menu.icon)" alt v-if="menu.icon" />
<span
style="display:block;width:4px;height:4px;background:#ffffff;margin-top:28px;margin-left:30px; border-radius:100%;"
:style="{backgroundColor:calssName=='listtxt'?'#a6160a':'#ffffff',}"
v-else
></span>
<span
slot="title"
style="display:block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;white-space : nowrap;"
>{{menu.name}}</span>
</el-menu-item>
</label>
</div>
</div>
script：
import menutree from "./boss";
export default {
name: "menutree",
data() {
return {
menu_data: {},
name: "one"
};
},
components: {
menutree: menutree
},
props: ["data","calssName"],
mounted() {
// console.log(this.$route);
},
methods: {
getImgUrl(icon) {
return require("@/assets/" + icon);
}
}
};
css：
.menutree /deep/ .el-menu-item,
.menutree /deep/ .el-submenu__title {
color: #ffffff !important;
height: 60px;
line-height: 60px;
display: flex;
text-align: left;
padding: 0;
img {
width: 16px;
height: 16px;
float: left;
margin-top: 21px;
margin-left: 39px;
}
span {
float: left;
margin-left: 12px;
}
}
.one /deep/ .el-menu {
background: none;
}
.listtxt.menutree /deep/ .el-menu-item,.listtxt.menutree /deep/ .el-submenu__title {
color: #a6160a !important;
}
好啦，就到這里了对雪，有不明白的地方可以跟我留言河狐，我是前端菜雞兒，嘻嘻嘻嘻瑟捣。
