Vue Router el-menu 子菜单高亮父级菜单解决方案

这个问题出现的原因是因为子菜单没有继承父级菜单的路由信息，所以在进入子菜单时，父级菜单不会高亮。

解决方案是在子菜单中手动设置路由信息，将父级菜单的路由信息继承过来。具体做法是在子菜单的路由信息中设置父级菜单的路由路径和名称，示例代码如下：

{
  path: '/parent',
  component: ParentComponent,
  children: [
    {
      path: 'child',
      component: ChildComponent,
      meta: {
        parentPath: '/parent', // 父级菜单路径
        parentName: 'ParentMenu' // 父级菜单名称
      }
    }
  ]
}

然后在菜单组件中判断当前路由是否匹配父级菜单的路由路径，如果匹配则高亮父级菜单。示例代码如下：

<el-menu-item :index="menuItem.index" :route="menuItem.route" :class="{ 'is-active': isActive(menuItem) }">
  {{ menuItem.label }}
</el-menu-item>

...

methods: {
  isActive(menuItem) {
    if (menuItem.route.path === this.$route.path) {
      return true
    }

    if (menuItem.route.meta && menuItem.route.meta.parentPath) {
      return this.$route.path.indexOf(menuItem.route.meta.parentPath) === 0
    }

    return false
  }
}

这样就能实现子菜单进入时父级菜单高亮的效果了。