一.首先贡献我的页面代码
<el-menu :default-active="activeIndex" mode="horizontal" router>
<template v-for="item in navList">
<el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.name" transfer popper-class="navDown">
<template slot="title">{{item.label}}</template>
<el-menu-item v-for="child in item.children" :key="child.name" style="text-align:center" :index="child.path"><i v-if="child.icon" :class="child.icon" />{{child.label}}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.path" :key="item.name">{{item.label}}</el-menu-item>
</template>
</el-menu>
二.还有我的导航,目前写死数据navList,没有后端请求导航,原理一致的,定义一个这个activeInde,激活的当前菜单对应
data() {
return {
navList: [
{
label: "首页",
path: "/msoIndex",
name: "msoIndex"
},
{
label: "我的应用",
path: "/myApp",
name: "myApp"
},
{
label: "创建应用",
path: "/createApp",
name: "createApp"
},
{
label: this.$t('menuList.myScene'),
path: "/myScene",
name: "myScene"
},
{
label: "系统设置",
path: "/systemSetting",
name: "systemSetting",
alien: 'center',
children: [
{
label: "规则",
path: "/ruleArrange",
name: "ruleArrange",
icon: "el-icon-s-tools"
},
{
label: "活动",
path: "/sceneManagement",
name: "sceneManagement",
icon: "el-icon-s-tools"
},
{
label: "对象",
path: "/ObjectManage",
name: "ObjectManage",
icon: "el-icon-s-tools"
}
]
},
{
label: "流程监控",
path: "/processControl",
name: "processControl"
}
],
activeIndex: '/' + location.hash.split('/')[1]
}
},
三.不是点击菜单进入url,也要高亮对应的导航菜单,必须要watch一下
watch: {
//监听路由
'$route.path'(newVal, oldVal) {
if(newVal !== oldVal){
this.activeIndex = '/' + location.hash.split('/')[1]
}
},
},
四.要想子路由也要高亮,就要配置路由的时候,放到当前菜单路由下级,这个才能对应高亮因为我用的location.hash.split('/')[1]
好了,现在应该可以了,希望能帮到你
网友评论