Vue Element UI el-menu 导航到子页面父级高亮丢失解决方案

当你从'el-menu'导航到页面的子页面时，父级菜单可能会失去高亮状态。这是因为'el-menu'默认情况下只考虑当前路由的路径，而不考虑其父级路由。

要解决这个问题，可以在'el-menu'中使用'default-active'属性来指定默认高亮项，并使用'router-link'来导航。例如：

<template>
  <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-submenu index="/products">
      <template slot="title">产品</template>
      <el-menu-item index="/products/list">产品列表</el-menu-item>
      <el-menu-item index="/products/detail">产品详情</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

在以上示例中，'default-active'属性设置为'$route.path'，这将使菜单项与当前路由匹配。使用'router-link'导航时，'index'属性也应设置为路由路径。

如果你想在子菜单中保持父菜单高亮状态，可以使用'default-openeds'属性来指定默认展开的子菜单项。例如：

<template>
  <el-menu :default-active="$route.path" :default-openeds="['/products']" class="el-menu-vertical-demo" router>
    <el-menu-item index="/home">首页</el-menu-item>
    <el-submenu index="/products">
      <template slot="title">产品</template>
      <el-menu-item index="/products/list">产品列表</el-menu-item>
      <el-menu-item index="/products/detail">产品详情</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

在以上示例中，'default-openeds'属性设置为'['/products']'，这将使子菜单项默认展开，从而保持父菜单高亮状态。