Vue el-menu 路由跳转详情页父级菜单高亮丢失解决方案

在使用 Vue el-menu 组件进行路由跳转时，可能会出现父级菜单高亮丢失的问题。这是因为 el-menu 默认只会高亮当前路由对应的菜单项，而不会高亮其父级菜单项。

解决方法：

在 el-menu 组件中添加 default-active 属性，并设置为当前路由路径，例如：

<el-menu default-active='/home'>
  <el-menu-item index='/home'>首页</el-menu-item>
  <el-submenu index='/product'>
    <template slot='title'>产品</template>
    <el-menu-item index='/product/list'>产品列表</el-menu-item>
    <el-menu-item index='/product/detail'>产品详情</el-menu-item>
  </el-submenu>
</el-menu>

在路由配置中添加 meta 属性，用于指定路由对应的菜单项的索引值，例如：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { index: '/home' }
  },
  {
    path: '/product/list',
    component: ProductList,
    meta: { index: '/product/list' }
  },
  {
    path: '/product/detail',
    component: ProductDetail,
    meta: { index: '/product/detail' }
  }
]

在 el-menu 组件中添加 router 属性，将其值设置为 true，表示开启路由模式，例如：

<el-menu default-active='/home' router>
  <el-menu-item index='/home'>首页</el-menu-item>
  <el-submenu index='/product'>
    <template slot='title'>产品</template>
    <el-menu-item index='/product/list'>产品列表</el-menu-item>
    <el-menu-item index='/product/detail'>产品详情</el-menu-item>
  </el-submenu>
</el-menu>

在 el-menu 组件中添加 router-link 组件，用于实现路由跳转，例如：

<el-menu default-active='/home' router>
  <router-link to='/home'>
    <el-menu-item index='/home'>首页</el-menu-item>
  </router-link>
  <el-submenu index='/product'>
    <template slot='title'>产品</template>
    <router-link to='/product/list'>
      <el-menu-item index='/product/list'>产品列表</el-menu-item>
    </router-link>
    <router-link to='/product/detail'>
      <el-menu-item index='/product/detail'>产品详情</el-menu-item>
    </router-link>
  </el-submenu>
</el-menu>

以上是解决 el-menu 路由进入详情页父级高亮丢失的方法。通过设置 default-active 属性和 meta 属性，以及使用 router 属性和 router-link 组件，可以实现 el-menu 组件在路由跳转时，同时高亮其父级菜单项。