Vue Router 和 Element UI el-menu 子菜单进入父级菜单高亮解决方案

问题描述：

使用 Vue Router 和 Element UI 中的 el-menu 组件，当进入子菜单时，父级菜单不会高亮显示。

解决方案：

在 Vue Router 中，可以通过 $route 对象来获取当前路由信息。可以根据 $route 来判断当前路由是否是某个菜单的子菜单，然后动态设置父级菜单的高亮。

以 Element UI 中的 el-menu 组件为例，可以通过设置 default-active 属性来设置默认选中的菜单项。default-active 属性可以接受一个字符串或一个数组。当传入一个字符串时，默认选中该字符串对应的菜单项；当传入一个数组时，默认选中该数组中的最后一个元素对应的菜单项。

因此，我们可以通过在 $route 对象中设置 meta 属性来标记当前路由是否是某个菜单的子菜单。在父级菜单的组件中，可以根据 $route 中的 meta 属性来动态设置 default-active 属性。

具体代码如下：

// 路由配置
const routes = [
  {
    path: '/home',
    component: Home,
    meta: { index: '1' },  // 标记为一级菜单
    children: [
      {
        path: 'menu1',
        component: Menu1,
        meta: { index: '1-1' }  // 标记为二级菜单
      },
      {
        path: 'menu2',
        component: Menu2,
        meta: { index: '1-2' }  // 标记为二级菜单
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: { index: '2' },  // 标记为一级菜单
    children: [
      {
        path: 'menu3',
        component: Menu3,
        meta: { index: '2-1' }  // 标记为二级菜单
      },
      {
        path: 'menu4',
        component: Menu4,
        meta: { index: '2-2' }  // 标记为二级菜单
      }
    ]
  }
]

// 父级菜单组件
<template>
  <el-menu :default-active='activeIndex'>
    <el-menu-item index='1'>首页</el-menu-item>
    <el-menu-item index='2'>关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    activeIndex() {
      const index = this.$route.meta.index  // 获取当前路由的菜单索引
      return index ? index.split('-')[0] : '1'  // 如果是子菜单，则获取父级菜单索引；否则默认选中第一个菜单项
    }
  }
}
</script>

// 子菜单组件
<template>
  <el-menu :default-active='activeIndex' class='sub-menu'>
    <el-menu-item index='1-1'>菜单1</el-menu-item>
    <el-menu-item index='1-2'>菜单2</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  computed: {
    activeIndex() {
      const index = this.$route.meta.index  // 获取当前路由的菜单索引
      return index ? index : '1-1'  // 如果是子菜单，则获取子菜单索引；否则默认选中第一个子菜单项
    }
  }
}
</script>

在上述代码中，我们通过在路由配置中为每个路由添加 meta 属性来标记菜单的层级关系。在父级菜单组件中，我们通过计算属性 activeIndex 来根据当前路由的 meta 属性动态设置 default-active 属性，从而实现父级菜单的高亮显示。在子菜单组件中，我们也是通过计算属性 activeIndex 来动态设置 default-active 属性，从而实现子菜单的高亮显示。

需要注意的是，在父级菜单组件中，我们使用了三元表达式来判断当前路由是否是子菜单。如果是子菜单，则获取父级菜单的索引；否则默认选中第一个菜单项。这是因为 default-active 属性只能设置一个值，而父菜单和子菜单的索引是不一样的。在子菜单组件中，我们直接使用当前路由的索引作为 default-active 属性的值，因为子菜单只有一层，不存在父菜单和子菜单的索引不一致的问题。