有很多網站會涉及到導航欄，我自己在開發中用的是element導航組件，並且自定義事件，給大家分享一下。
1.使用遞歸方法，無限循環子級菜單。
2.使用組件封裝，維護方便。
3.使用index作為路由跳轉。
4.結合后台動態渲染。
5.自定義樣式，修改默認icon。
6.根據后台返回數據，動態設置默認選中。
1.封裝組件。
首先創建好vue之后，在a_module里創建一個存放組件的文件夾，因為a_module是存放公共資源以及靜態文件的，當然也可以根據喜好來創建。
2.調用組件。
在要使用到的頁面中使用 import 引入封裝好的組件，components初始化一下，在頁面中使用。
注意：這里需要注意的是，在引用的頁面中一定要el-menu包裹起來，可以在el-menu標簽里來配置側邊欄的各種狀態。
3.組件傳值
我是后台拿到的數據，當然也可以自定義數據，在引用組建的頁面內創建，在子組件標簽上邊自定義事件，在子組件用props接收參數。
4.el-menu配置
這里呢，需要在父組件內配置側邊欄的各種狀態，選中狀態啦，index路由跳轉啦，等等。
這里呢，我主要配置了，router：開啟index跳轉路由，default-active:默認選中，這里呢我做了很多判斷，大家可以根據實際情況來做處理，我主要是拿到當前地址，來做選中狀態。active-text-color:配置字體顏色，等等
5.子組件遞歸，無限循環子級
我呢用的是遞歸的方法，他的原理呢就是自己調用自己。
注意看紅色框中的內容，
（1）.大家可以看到，我在跟標簽里邊寫了一個：class，主要原因就是，但你循環自己的時候，設置css樣式只會生效一次，這個可以解決這個問題。
（2）.然后呢，根據數據結構，循環父組件傳遞過來的參數，如果沒有children的話，循環下邊的代碼，不調用子級，如果有children的話證明有子級菜單，那么調用上邊代碼。
（3）.大家可以看到在label標簽里我又調用了自己，然后傳遞參數，這里就是遞歸，如果滿足條件就無線調用自己。
（4）.這里呢我用了自定義圖標，大家可以觀察我的布局。
（5）.到這里已經差不多了，但是要注意的是，:index，接受的是字符串形式的值，所以這里比較坑，需要的話可以用String（）轉化一下。
（6）.至於圖片里getImgUrl()方法，是解決圖片異步的一種方法。
6.默認樣式
很多框架的默認樣式是很難修改的，大家可以在頁面中去找的class類名去修改，我用的是 /deep/ 這個是一個深度修飾符 或者是 >>> ,當然也可以在跟文件里去修改樣式，但是我不建議這樣去做，因為會他是全局修改，容易影響其他頁面的樣式。
差不多就是這些了，樣式的以及源碼我在下邊給大家附上。
父組件：
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> <!-- 側邊導航組件 --> </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;
}
}
}
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: "結果統計", 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: "崗位勞資設定",
path: "/Hr-index/labour/setting"
}
]
},
{
id: 4,
name: "考勤管理",
path: "/Hr-index/check/manage",
icon: "icon_manage.png"
},
{
id: "5",
name: "培訓管理",
path: "/Hr-index/modlifyift",
icon: "icon_modifyift.png"
},
{
id: "6",
name: "離崗創業管理",
path: "/Hr-index/Quit",
icon: "icon_dimission.png"
},
{
id: "7",
name: "護照管理",
icon: "icon_Passport.png",
path: "/Hr-index/Passport"
},
{
id: "8",
name: "權限管理",
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: "院系專業管理",
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: "培訓詳情", path: "/Hr-index/Personal_train" }
]
}
], //導航數組
子組件：
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>
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);
}
}
};
.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; }