直接使用Element的導航菜單組件,參考官方文檔:http://element-cn.eleme.io/#/zh-CN/component/menu大數據
問題1:設置當前的導航樣式,直接使用自帶屬性控制就能夠。this
<el-menu :default-active="$route.path"
:unique-opened="true"
class="el-menu-demo"
@select="handleSelect"
background-color="rgba(0,0,0,0)"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic1.png" alt="" class="ic-pic">
<span>運營中心</span>
</template>
<el-menu-item-group>
<el-submenu index="1-1">
<template slot="title">
<span>審覈中心</span>
</template>
<el-menu-item-group>
<el-menu-item index="../index/auditHistory">
技術員審覈
</el-menu-item>
<el-menu-item index="1-2">維保圓審覈</el-menu-item>
<el-menu-item index="/index/propertyList">物業公司審覈</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/operation/businessList">業務列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic2.png" alt="" class="ic-pic">
<span>電梯管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/ElevatorManagement">
統計看板
</el-menu-item>
<el-menu-item index="2-2">維保數據</el-menu-item>
<el-menu-item index="">警報數據</el-menu-item>
<el-menu-item index="/ElevatorManagement/ElevatorList">列表查看</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="8">
<template slot="title">
<!--<i class="el-icon-location"></i>-->
<img src="/static/images/icon/ic1.png" alt="" class="ic-pic">
<span>廣告管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/advertisement/advertiserList">
廣告列表
</el-menu-item>
<el-menu-item index="/advertisement/">廣告設置</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="9">
<img src="/static/images/icon/ic8.png" alt="" class="ic-pic">
<span slot="title">大數據中心</span>
</el-menu-item>
</el-menu>
@select="handleSelect"給菜單添加點擊事件
事件的定義:
handleSelect(key, keyPath) { //key是index屬性值,index能夠直接設置路徑。 this.$router.push({path:key})},這樣就完成了,點擊菜單跳轉後自動保存當前菜單的狀態。問題2:只保持一個菜單展開unique-opened 是否只保持一個子菜單的展開