Vue Router el-menu children 进入子菜单父级菜单高亮丢失

问题描述：

在使用 Vue Router 和 ElementUI 中的 el-menu 组件时，当进入子菜单后，父级菜单的高亮状态会丢失。

解决方法：

1.在 el-menu 中设置 router 属性为 true，这样菜单就会自动根据路由信息来高亮。

<el-menu router>
  <el-submenu index="1">
    <template slot="title">一级菜单</template>
    <el-menu-item index="1-1">子菜单一</el-menu-item>
    <el-menu-item index="1-2">子菜单二</el-menu-item>
  </el-submenu>
</el-menu>

2.在路由配置中，为每个路由设置 meta 属性，用来存储菜单的索引值。

const routes = [
  {
    path: '/',
    component: Home,
    meta: { index: 'home' } // 设置菜单索引值为 'home'
  },
  {
    path: '/about',
    component: About,
    meta: { index: 'about' } // 设置菜单索引值为 'about'
  }
]

3.在 el-menu 中使用 v-for 遍历菜单数据，通过 $route.meta.index 和菜单的 index 属性来判断是否需要高亮。

<el-menu router>
  <el-menu-item v-for="menu in menus" :index="menu.index" :key="menu.index"
                :class="{ 'is-active': $route.meta.index === menu.index }"
  >
    {{ menu.title }}
  </el-menu-item>
</el-menu>

这样就可以在进入子菜单后，仍然保持父级菜单的高亮状态了。