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

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

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

解决方法：

1. 在路由配置中添加 meta 属性，用于指定菜单的名称：

{
  path: '/detail',
  name: 'detail',
  component: DetailComponent,
  meta: { menu: 'detail' }
}

2. 在父级菜单中添加 index 属性，用于指定菜单的索引值：

<el-menu-item index='1'>
  <i class='el-icon-menu'></i>
  <span slot='title'>菜单一</span>
</el-menu-item>

3. 在 el-menu 组件中添加 default-active 属性，用于指定默认选中的菜单：

<el-menu default-active='1'>
  <el-menu-item index='1'>
    <i class='el-icon-menu'></i>
    <span slot='title'>菜单一</span>
  </el-menu-item>
  <el-submenu index='2'>
    <template slot='title'>
      <i class='el-icon-message'></i>
      <span>菜单二</span>
    </template>
    <el-menu-item index='2-1'>
      <span slot='title'>子菜单一</span>
    </el-menu-item>
    <el-menu-item index='2-2'>
      <span slot='title'>子菜单二</span>
    </el-menu-item>
  </el-submenu>
  <el-menu-item index='3'>
    <i class='el-icon-setting'></i>
    <span slot='title'>菜单三</span>
  </el-menu-item>
</el-menu>

4. 在 el-menu 组件中添加 router 属性，用于启用路由模式：

<el-menu default-active='1' router>
  ...
</el-menu>

5. 在 el-menu 组件中添加 :route-active='true' 属性，用于启用路由高亮：

<el-menu default-active='1' router :route-active='true'>
  ...
</el-menu>

6. 在 el-menu 组件中添加 :default-openeds 属性，用于指定默认展开的菜单项：

<el-menu default-active='1' router :route-active='true' :default-openeds='['2']'>
  ...
</el-menu>

注意：上述代码中的 '2' 是子菜单的索引值，如果需要展开多个菜单项，可以将多个索引值放在一个数组中。