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

问题描述：

使用 Vue 的 el-menu 组件，在路由进入详情页后，父级菜单的高亮状态丢失了。

问题原因：

el-menu 组件的高亮状态是通过设置 el-menu-item 的 index 属性来实现的，但是在路由进入详情页后，由于路由地址的变化，el-menu-item 的 index 属性也发生了变化，从而导致父级菜单的高亮状态丢失。

解决方法：

可以通过在路由跳转时，动态设置 el-menu-item 的 index 属性来保持菜单的高亮状态。

在路由跳转前，获取当前路由的路径，然后根据路径设置 el-menu-item 的 index 属性。

示例代码：

// 在路由跳转前，动态设置 el-menu-item 的 index 属性
router.beforeEach((to, from, next) => {
  let path = to.path
  let activeIndex = '/' + path.split('/')[1] // 获取父级菜单的路径
  this.$store.commit('setActiveIndex', activeIndex) // 将父级菜单的路径存储到 Vuex 中
  next()
})

// 在 el-menu 组件中，动态设置 el-menu-item 的 index 属性
<el-menu :default-active="$store.state.activeIndex">
  <el-menu-item index="/dashboard">Dashboard</el-menu-item>
  <el-menu-item index="/user">User</el-menu-item>
  <el-submenu index="/order">
    <template slot="title">Order</template>
    <el-menu-item index="/order/list">Order List</el-menu-item>
    <el-menu-item index="/order/detail">Order Detail</el-menu-item>
  </el-submenu>
</el-menu>

在上述代码中，通过在路由跳转前动态设置父级菜单的路径，然后将路径存储到 Vuex 中。在 el-menu 组件中，通过设置 default-active 属性，将父级菜单的路径作为 el-menu-item 的 index 属性，实现菜单的高亮状态保持。