Vue El-Menu 路由跳转详情页父级高亮丢失解决方案

Vue El-Menu 路由进入详情页 父级高亮丢失解决方案

问题描述：

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

解决方法：

1. 在 el-menu 组件中添加 :default-active="$route.path" 属性，使菜单根据当前路由路径自动高亮。

2. 在路由配置中设置 meta 属性，用于标识当前路由的父级菜单。

{
  path: '/detail',
  name: 'Detail',
  component: Detail,
  meta: { parentMenu: 'parent1' }
}

3. 在 el-menu 组件中添加 :default-openeds="openeds" 属性，用于存储所有需要展开的菜单项的 index。

<el-menu :default-active="$route.path" :default-openeds="openeds">
  <el-submenu index="parent1">
    <template slot="title">父级菜单1</template>
    <el-menu-item index="/detail">详情页</el-menu-item>
  </el-submenu>
  <el-submenu index="parent2">
    <template slot="title">父级菜单2</template>
    <el-menu-item index="/other">其他页面</el-menu-item>
  </el-submenu>
</el-menu>

4. 在路由跳转时，通过路由守卫获取当前路由的 meta 属性，将其值设为 openeds 数组中的元素。

router.beforeEach((to, from, next) => {
  const parentMenu = to.meta.parentMenu
  if (parentMenu && !openeds.includes(parentMenu)) {
    openeds.push(parentMenu)
  }
  next()
})

这样，通过以上的步骤，就可以在 el-menu 组件中实现路由跳转时父级菜单的高亮状态不丢失。