解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

:default-active="activeMenu"   // 默认高亮（当前激活菜单的 index）
router  // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，此时菜单的高亮是menu组件中的index属性和地址栏中的路径匹配到了就会高亮。

  <el-menu
      :default-active="activeMenu"
      class="el-menu-demo"
      mode="horizontal"
      router
      :background-color="#000"
      text-color="#fff"
      active-text-color="#409eff">
      <el-menu-item index="/home"><i class="iconfont icon-zhuye" style="vertical-align: 0px;"></i> 首页</el-menu-item>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-monitor"></i>监控</template>
        <el-menu-item index="/monitor/aaa">111111</el-menu-item>
        <el-menu-item index="/monitor/bbb">22222</el-menu-item>
        <el-menu-item index="/monitor/ccc">333333</el-menu-item>
        <el-menu-item index="/monitor/DDD">44444</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-s-marketing"></i>CDN</template>
        <el-menu-item index="/cdn/aaa">域名管理</el-menu-item>
        <el-menu-item index="/cdn/bbb">111111</el-menu-item>
        <el-menu-item index="/cdn/ccc">222222</el-menu-item>
        <el-menu-item index="/cdn/ddd">333333</el-menu-item>
      </el-submenu>
      <el-menu-item index="/apiDocument"><i class="iconfont icon-iconset0118"></i> 接口文档</el-menu-item>
  </el-menu>

export default {
  computed: {
  // 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
  // 使得菜单在载入时就能对应高亮
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  }
}

       <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo api-menu"
          router
          @open="handleOpen"
          @close="handleClose"
          background-color="#f8f8f8"
          :default-openeds=defaultOpen
          text-color="#666"
          active-text-color="#409eff">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-marketing"></i>
                <span class="bold-font">CDN</span>
            </template>
            <el-menu-item index="/apiDocument/cdnSummary">
                <span class="bold-font">概览</span>
            </el-menu-item>
            <el-submenu index="1-1">
              <template class="sub-drop-title" slot="title"><span class="bold-font">API列表</span> 总数2个</template>
              <el-menu-item class="api-menu-item" index="/apiDocument/pushRefresh">
                <span class="api-item">
                  <span>push_refresh </span>
                  <span style="font-size: 13px;color:#999;">aaaaa</span>
                </span>                
              </el-menu-item>
              <el-menu-item class="api-menu-item" index="/apiDocument/refreshTasks">
                <span class="api-item">
                  <span>refresh_tasks </span>
                  <span style="font-size: 13px;color:#999;">bbbbb</span>
                </span>
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>

export default {
  data () {
    return {
      defaultOpen: ['1','1-1'] // 默认展开菜单项
    }
  },
  computed: {
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.apiActiveMenu) { // 注意这里很重要
        return meta.apiActiveMenu
      }
      return path
    }
  }
}

routes: [
  // 重定向，打开接口文档页面就重定向到 概览
  {
    path: '/apiDocument',
    redirect: '/apiDocument/cdnSummary',
    hidden: true // 不需要再Menu菜单上显示的就设置这个属性
  },
  // 接口文档路由
  {
   // 接口文档菜单的动态加载配置 start
    path: '',
    name: 'apiDocument',
    component: customerLayout,
    GotoPath: '/apiDocument', // 自定义属性 （主菜单中的index属性值）
    meta: {
      title: '接口文档',
      activeMenu: '/apiDocument'
    },
    showOne: true, // 自定义属性
    hidden: true,
    // 接口文档菜单的动态加载配置 end
    children: [{
      path: '',
      component: apiDoc,
      children: [
        {
          path: '/apiDocument/cdnSummary',
          component: cdnSummary,
          meta: {
            activeMenu: '/apiDocument', // 主菜单 的 接口文档 高亮
            apiActiveMenu: '/apiDocument/cdnSummary' // 接口文档的子菜单高亮
          }
        },
        {
          path: '/apiDocument/pushRefresh',
          component: pushRefresh,
          meta: {
            activeMenu: '/apiDocument',
            apiActiveMenu: '/apiDocument/pushRefresh' // 接口文档的子菜单高亮
          }
        },
        {
          path: '/apiDocument/refreshTasks',
          component: refreshTasks,
          meta: {
            activeMenu: '/apiDocument',
            apiActiveMenu: '/apiDocument/refreshTasks' // 接口文档的子菜单高亮
          }
        }
      ]
    }]
  }
]