Vue el-menu 路由跳转详情页 父级菜单高亮丢失解决方法

当从 'el-menu' 组件中的一个路由链接进入详情页时，可能会出现父级菜单高亮丢失的问题。这是因为 'el-menu' 组件默认只会高亮当前路由对应的菜单项，而不会高亮其父级菜单。

解决方法是在路由配置中添加 'meta' 属性，用来标记该路由对应的菜单项的路径。然后在 'el-menu' 组件中使用 'default-active' 属性设置默认高亮的菜单项路径，使用 'router' 属性启用路由模式。

下面是示例代码：

路由配置：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      menuPath: '/home'
    }
  },
  {
    path: '/detail',
    component: Detail,
    meta: {
      menuPath: '/home/detail'
    }
  }
]

'el-menu' 组件：

<el-menu
  :default-active="$route.meta.menuPath"
  router
>
  <el-menu-item index="/home">首页</el-menu-item>
  <el-submenu index="/home">
    <template slot="title">菜单</template>
    <el-menu-item index="/home/detail">详情页</el-menu-item>
  </el-submenu>
</el-menu>

这样，当从菜单中进入详情页时，其父级菜单项 '/home' 也会被高亮。