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属性中的配置一直一致，这样就使主菜单保持高亮了。