Vue el-menu 进入详情页父级菜单高亮设置方法

<template>
  <el-menu :unique-opened='true' :default-active='$route.path' router>
    <el-submenu index='/parent'>
      <template slot='title'>父级菜单</template>
      <el-menu-item index='/parent/child1'>子菜单1</el-menu-item>
      <el-menu-item index='/parent/child2'>子菜单2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  metaInfo: {
    activeMenu: '/parent' // 设置需要高亮的父级菜单的路径
  }
}
</script>
<h2>Vue el-menu 进入详情页父级菜单高亮设置方法</h2>
<p>Vue el-menu 中的父级菜单在进入其子菜单时默认不高亮，需要手动设置。具体方法如下：</p>
<ol>
<li>
<p>在 el-menu 组件中设置 <code>unique-opened</code> 属性为 <code>true</code>，即只保持一个子菜单展开。</p>
</li>
<li>
<p>在 el-menu-item 组件中设置 <code>index</code> 属性为对应的菜单项的路径。</p>
</li>
<li>
<p>在 el-menu 组件中设置 <code>default-active</code> 属性为对应的菜单项的路径，即默认选中的菜单项。</p>
</li>
<li>
<p>在 el-menu 组件中设置 <code>router</code> 属性为 <code>true</code>，即启用路由模式。</p>
</li>
<li>
<p>在路由配置中设置 <code>meta</code> 属性中的 <code>activeMenu</code> 为对应的父级菜单的路径，即进入该子菜单时需要高亮的父级菜单的路径。</p>
</li>
</ol>
<p><strong>示例代码如下：</strong></p>
<pre><code>&lt;template&gt;
  &lt;el-menu :unique-opened='true' :default-active='$route.path' router&gt;
    &lt;el-submenu index='/parent'&gt;
      &lt;template slot='title'&gt;父级菜单&lt;/template&gt;
      &lt;el-menu-item index='/parent/child1'&gt;子菜单1&lt;/el-menu-item&gt;
      &lt;el-menu-item index='/parent/child2'&gt;子菜单2&lt;/el-menu-item&gt;
    &lt;/el-submenu&gt;
  &lt;/el-menu&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  metaInfo: {
    activeMenu: '/parent' // 设置需要高亮的父级菜单的路径
  }
}
&lt;/script&gt;
</code></pre>