:default-active="activeMenu"   // 默認(rèn)高亮（當(dāng)前激活菜單的 index）
router  // 是否使用 vue-router 的模式，啟用該模式會在激活導(dǎo)航時以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)，此時菜單的高亮是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>監(jiān)控</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: {
  // 我們使用計算屬性來獲取到當(dāng)前點(diǎn)擊的菜單的路由路徑，然后設(shè)置default-active中的值
  // 使得菜單在載入時就能對應(yīng)高亮
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      // 可以在路由配置文件中設(shè)置自定義的路由路徑到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> 總數(shù)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'] // 默認(rèn)展開菜單項(xiàng)
    }
  },
  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 // 不需要再M(fèi)enu菜單上顯示的就設(shè)置這個屬性
  },
  // 接口文檔路由
  {
   // 接口文檔菜單的動態(tài)加載配置 start
    path: '',
    name: 'apiDocument',
    component: customerLayout,
    gotoPath: '/apiDocument', // 自定義屬性 （主菜單中的index屬性值）
    meta: {
      title: '接口文檔',
      activeMenu: '/apiDocument'
    },
    showOne: true, // 自定義屬性
    hidden: true,
    // 接口文檔菜單的動態(tài)加載配置 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' // 接口文檔的子菜單高亮
          }
        }
      ]
    }]
  }
]