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

如果在 Vue el-menu 中使用路由进入详情页后，父级菜单的高亮丢失，可以通过以下步骤解决：

1. 在路由中为每个路由配置一个 meta 属性，用于存储菜单名称。

{
  path: '/detail',
  name: 'detail',
  component: Detail,
  meta: {
    title: '详情页'
  }
}

2. 在 el-menu 组件中使用 router 属性，并设置 default-active 属性为当前路由的 name。

<el-menu :router='true' :default-active='$route.name'>
  <el-menu-item index='home'>首页</el-menu-item>
  <el-menu-item index='detail'>详情页</el-menu-item>
</el-menu>

3. 在 el-menu 组件中的每个菜单项上使用 :index 属性，并设置为对应路由的 name。

<el-menu-item :index='route.name' v-for='route in $router.options.routes' :key='route.path'>
  {{ route.meta.title }}
</el-menu-item>

这样就可以在路由进入详情页后，保持父级菜单的高亮状态。