通过路由高亮菜单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!-- 判断是二级菜单 -->
<el-popover v-elde-if = "item.menuList%%item.menuLevel === 2" placement="right" trigger ="hover" popoer-class="popover-menu">
<!-- 不具名插槽，弹框内容 -->
<div class = "menu-item" v-for "i in item.menuList" :key = "i.menuId">
<!-- 绑定动态class类 -->
<app-link :to="i.menuHref">
<div class='item.child' :class ="{highlight:i.menuHref==activeMenu}">{{i.menuName}}</div>
</app-link>
<!-- 具名插槽，弹框触发元素 -->
<el-menu-item slot ="reference" :index="item.menuId" :class="{light:currentItem}">
<template slot = "title">
<item :title = "item.menuName" />
</template>
</el-menu-item>
</div>
</el-popover>

computed:{
<!-- 获取当前的路由，和当前选中菜单的路由对比，若一致则高亮当前三级菜单 -->
activeMenu(){
    return this.$router.path
    }
},
currentItem(){
    if(this.item.menuList){
        let res = false
        <!-- 遍历menuList,其中的子菜单即三级菜单的路由和当前所在的三级菜单的路由一致，则高亮对应的二级菜单 -->
        for (let i = 0;i<this.item.menuList.length;i++){
            if(this.item.menuList[i].menuHref==this.activeMenu){
                res=true
            }
        }
        return res 
    }else{
        return false
    }
}

}

.menu-item{
    margin:0,auto;
}
.item-child{
    height:60px;
    light-height:60px;
    font-size:16px;
    color:#333;
    text-align:center;
}

<!-- 悬浮高亮  -->
.item-child:hover{
    background-color:#2578cc;
    color:white;
}
<!-- 当前所在页菜单高亮，当前所在页菜单的二级菜单高亮 -->
.highlight , .light{
    background-color:#2578cc;
    color:white;
}