共计 1177 个字符，预计需要花费 3 分钟才能阅读完成。
想让一级菜单与二级菜单中的相应页面的菜单同时高亮（同时管制 2 个拆散菜单的高亮）
解决办法：须要在每项路由中设置 meta 属性的不同字段来管制高亮
（刷新仍能高亮时以路由门路匹配式高亮）
一级菜单：
<el-menu
router
:default-active="currentRoute"
mode="horizontal"
...
>
<el-menu-item index="/report">report</el-menu-item>
</el-menu>
<script>
export default {data(){return {}
},
created(){this.currentRoute=this.$route.path;},
mounted(){this.$router.push('/report/myReport')
},
computed:{currentRoute(){
const route = this.$route
const {meta, path} = route
if (meta.mainCurrentRoute) { // 留神这里很重要
return meta.mainCurrentRoute
}
return path
}
}
}
</script>二级菜单：
<el-menu-item index="/report/myReport">myReport</el-menu-item>
<script>
export default {data () {return {}
},
created(){this.currentRoute=this.$route.path;},
mounted(){this.$router.push('/report/myReport')
},
computed:{currentRoute(){
const route = this.$route
const {meta, path} = route
if (meta.currentRoute) { // 留神这里很重要
return meta.currentRoute
}
return path
}
}
}
</script>router/index.js
routes: [
{
path: '/report',
name: 'report',
component: report,
meta:{mainCurrentRoute: '/report'},
children:[{
path: 'myReport',
name: 'myReport',
component: myReport,
meta:{
mainCurrentRoute: '/report', // 一级菜单高亮
currentRoute: '/report/myReport' // 二级菜单高亮
}
}]
}
...
]原文：https://blog.csdn.net/m0_38134431/article/details/94755527
正文完
