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