Vue Router el-menu 子菜单高亮父级菜单实现方法

要使Vue Router中的el-menu子菜单在进入子菜单时高亮其父级菜单，可以使用以下步骤：

首先，需要在Vue Router中设置路由的meta属性，以指定每个路由的菜单信息，例如：

{
  path: '/dashboard',
  component: Dashboard,
  meta: { title: 'Dashboard', icon: 'dashboard' },
  children: [
    {
      path: 'overview',
      component: Overview,
      meta: { title: 'Overview' }
    },
    {
      path: 'users',
      component: Users,
      meta: { title: 'Users' }
    }
  ]
}

在此示例中，我们在路由的meta属性中添加了标题和图标信息，以便在菜单中显示。

接下来，需要在el-menu组件中使用Vue Router的$route对象来确定当前活动的路由，例如：

<el-menu :default-active="$route.path">
  <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route">
    <i :class="'el-icon-' + item.icon"></i>
    <span slot="title">{{ item.title }}</span>
  </el-menu-item>
</el-menu>

在此示例中，我们将el-menu的default-active属性设置为$route.path，以便根据当前活动的路由高亮菜单项。

最后，在el-menu的子菜单中，需要使用$route.matched来确定当前路由是否匹配子菜单的路由，例如：

<el-submenu v-if="item.children" :index="item.route">
  <template slot="title">
    <i :class="'el-icon-' + item.icon"></i>
    <span>{{ item.title }}</span>
  </template>
  <el-menu-item v-for="child in item.children" :key="child.route" :index="child.route" :route="child.route" :class="{ 'is-active': $route.matched.some(route => route.path === child.route) }">
    {{ child.title }}
  </el-menu-item>
</el-submenu>

在此示例中，我们使用$route.matched.some来确定当前路由是否与子菜单的路由匹配，并根据需要添加is-active类来高亮父级菜单。

通过使用上述步骤，您可以确保Vue Router中的el-menu子菜单在进入子菜单时高亮其父级菜单。