关于vue.js:element中navMenu菜单高亮嵌套菜单

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