element NavMenu导航菜单,跳转到子页面，导航不高亮

当我们使用elementui 中的 NavMenu 导航菜单时，可能会有这样一个问题，我们点击的那一项高亮显示，但是当我们从一级页面跳转到子页面时，菜单高亮会消失。这样是很不友好的，我们可以使用 NavMenu中的 default-active 和 router 属性来解决。

方法一 添加额外字段

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
</el-menu>

设置 onRoutes 计算属性

export default {
  computed: {
    onRoutes() {
      const route = this.$route
      const { meta, path } = route
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      // meta中 有activeMenu 字段的子页面，都会显示高亮
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  }
}

路由配置

routes: [
  {
    path: '/',
    name: 'apiDocument',
    component: customerLayout,
    children: [
      {
        path: '/apiDocument',
        component: '...',
        meta: {
          title: '父页面'
        }，
      },
      {
        path: '/apiDocument',
        component: '...',
        meta: {
          title: '子页面'，
          activeMenu:'apiDocument'
        }， 
       },
      {
        path: '/apiDocument',
        component: '...',
        meta: {
          title: '父页面'，
          activeMenu:'apiDocument'
        }
      },
    }]
  }
]

在每次点击菜单时浏览器地址栏中的地址就会改变，一级菜单是 通过 index 来控制选中状态从而显示高亮，现在我们使用activeMenu来自定义控制二级对应高亮，使得activeMenu配置和一级菜单的index属性中的配置一直一致，这样就使主菜单保持高亮了。

方法二使用route.path

<el-menu
       class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      text-color="#fff"
      active-text-color="#fff"
      background-color="#0e0d0a"
      unique-opened
      :router="true">
     <template v-for="item in routes" :key="item.path">
       <el-menu-item :index="item.path" >
          <span>{{ item["name"] }} <b></b></span>
      </el-menu-item>
  </template>
</el-menu>

设置 onRoutes 计算属性

export default {
  computed: {
    onRoutes() {
      const route = this.$route
      const { meta, path } = route
      return ‘/’ + path.split("/")[1]
    }
  }
}

导航配置

routes: [
  {
    path: '/apiDocument',
    children: [
      {
        path: '/apiDocument/123',
      },
      {
        path: '/apiDocument/325?id=123'
       }
    }]
  }
]

当绑定的index为路由菜单的path时，onRoutes = ‘/’ + route.path.split("/")[1]，使onRoutes 和 index 一致时，也可以做到高亮，这样必须让子路由结构 = 父路由+xx，如：父为 /apiDocument，子为 /apiDocument/details?id=123，这样获取的onRoutes 才和父path一致