Vue Router el-menu 子菜单详情页父级菜单不亮解决方案

在使用 Vue Router 和 Element UI 中的 el-menu 组件时，如果详情页的父级菜单不高亮，可能是因为路由配置中没有设置合适的 active-class。在 el-menu 中，可以通过设置 active-class 属性来指定菜单项激活时的样式类。例如：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'details',
          component: Details
        }
      ]
    }
  ]
})

// el-menu 组件
<el-menu default-active='/home'>
  <el-menu-item index='/home'>首页</el-menu-item>
  <el-submenu index='/home'>
    <template slot='title'>详情页</template>
    <el-menu-item index='/home/details'>详情</el-menu-item>
  </el-submenu>
</el-menu>

在上面的例子中，我们设置了默认激活的菜单项为'/home'，并在 el-menu 和 el-submenu 组件中分别指定了 index 属性为'/home' 和 '/home/details' 的菜单项。接下来，我们可以通过设置 active-class 属性来指定菜单项激活时的样式类，例如：

// el-menu 组件
<el-menu default-active='/home' :active-class=''el-menu-item-active''>
  <el-menu-item index='/home'>首页</el-menu-item>
  <el-submenu index='/home' :active-class=''el-submenu-item-active''>
    <template slot='title'>详情页</template>
    <el-menu-item index='/home/details'>详情</el-menu-item>
  </el-submenu>
</el-menu>

在上面的例子中，我们将 active-class 属性设置为'el-menu-item-active' 和 'el-submenu-item-active'，分别对应菜单项和子菜单项的激活样式类。这样，在详情页中，父级菜单项也会被正确高亮显示。