Vue El-Menu 路由跳转父级菜单高亮丢失解决方案

在使用 Vue El-Menu 组件进行路由导航时，可能会出现进入详情页后父级菜单高亮丢失的问题。这是因为默认情况下，el-menu 组件只会根据当前路由匹配的路径来高亮菜单，而不会考虑路由参数。解决这个问题的方法有两种：

使用 el-menu 的 unique-opened 属性

将 unique-opened 属性设置为 true，这样每次只会展开一个子菜单，同时也会自动关闭其他子菜单，避免了高亮丢失的问题。

使用 el-menu-item 的 index 属性

在 el-menu-item 上使用 index 属性来指定菜单项的唯一标识，同时在路由配置中为每个路由指定一个对应的 index 值。这样，当路由跳转时，el-menu 组件会根据当前路由的 index 值来高亮对应的菜单项，而不会受到路由参数的影响。

举个例子，假设我们有如下路由配置：

{
  path: '/list',
  component: List,
  meta: {
    index: 'list'
  },
  children: [
    {
      path: ':id',
      component: Detail,
      meta: {
        index: 'detail'
      }
    }
  ]
}

然后在 el-menu 中使用 index 属性：

<el-menu :default-active="$route.meta.index" mode="horizontal">
  <el-menu-item index="list">列表</el-menu-item>
  <el-menu-item index="detail">详情</el-menu-item>
</el-menu>

这样就可以解决父级菜单高亮丢失的问题了。