想让一级菜单与二级菜单中的相应页面的菜单同时高亮(同时管制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