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

要使 Vue Router el-menu 子菜单中的父级菜单高亮，您需要在路由配置中设置子路由的 meta 属性，以指示父路由的路径。

例如，如果您有以下路由配置：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      title: 'Home'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: 'About'
    }
  },
  {
    path: '/products',
    component: Products,
    meta: {
      title: 'Products'
    },
    children: [
      {
        path: '',
        component: ProductList,
        meta: {
          title: 'Product List'
        }
      },
      {
        path: ':id',
        component: ProductDetail,
        meta: {
          title: 'Product Detail',
          parent: '/products'
        }
      }
    ]
  }
]

您可以在子路由的 meta 属性中添加一个名为“parent”的属性，它将包含父级路由的路径。在这种情况下，我们将“/products”作为父级路径。

现在，您可以在 el-menu 组件中使用“router-link”元素来生成菜单项，并将“exact-active-class”属性设置为要使用的高亮类名。您还可以使用 $route.matched 属性来检查当前路由是否包含父级路由的路径，以决定是否应该将菜单项高亮显示。

例如，以下代码将在路由匹配到“/products/:id”时高亮显示“Products”菜单项：

<el-menu :default-active="$route.path" mode="horizontal" class="el-menu-demo" router>
  <el-menu-item index="/">
    <router-link to="/">Home</router-link>
  </el-menu-item>
  <el-menu-item index="/about">
    <router-link to="/about">About</router-link>
  </el-menu-item>
  <el-submenu index="/products">
    <template slot="title">Products</template>
    <el-menu-item index="/products" v-if="$route.matched.some(record => record.meta.parent === '/products')">
      <router-link to="/products">Product List</router-link>
    </el-menu-item>
    <el-menu-item v-for="product in products" :key="product.id" :index="'/products/' + product.id">
      <router-link :to="'/products/' + product.id">{{ product.name }}</router-link>
    </el-menu-item>
  </el-submenu>
</el-menu>

请注意，我们还将“default-active”属性设置为当前路由路径，以确保在加载页面时正确高亮显示当前活动菜单项。