Vue Router el-menu 子菜单高亮父级菜单

<p>在 Vue Router 中，可以通过设置路由的'meta'字段来实现菜单高亮显示。例如，可以在每个路由中设置一个'meta'字段来指示该路由所属的菜单项，并在菜单项组件中根据当前路由的'meta'字段来决定哪些菜单项应该高亮。</p>
<p>对于'el-menu'组件，可以使用'default-active'属性来设置默认选中的菜单项，在进入子菜单时，可以将父级菜单的'default-active'属性设置为当前路由所对应的菜单项的'index'值，这样就可以实现父级菜单高亮显示的效果。</p>
<p>下面是一个示例代码：</p>
<pre><code class="language-html"><template>
  <el-menu :default-active="$route.meta.menuIndex" class="el-menu-vertical-demo">
    <el-submenu v-for="item in menuList" :key="item.index" :index="item.index">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
        {{ child.title }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          title: '菜单1',
          index: 'menu1',
          children: [
            {
              title: '子菜单1',
              index: 'menu1-1'
            },
            {
              title: '子菜单2',
              index: 'menu1-2'
            }
          ]
        },
        {
          title: '菜单2',
          index: 'menu2',
          children: [
            {
              title: '子菜单3',
              index: 'menu2-1'
            },
            {
              title: '子菜单4',
              index: 'menu2-2'
            }
          ]
        }
      ]
    }
  }
}
</script></code></pre>
<p>在路由配置中，设置'meta'字段：</p>
<pre><code class="language-javascript">const routes = [
  {
    path: '/',
    redirect: '/menu1/menu1-1'
  },
  {
    path: '/menu1',
    component: Menu1,
    meta: {
      menuIndex: 'menu1'
    },
    children: [
      {
        path: 'menu1-1',
        component: Menu11,
        meta: {
          menuIndex: 'menu1-1'
        }
      },
      {
        path: 'menu1-2',
        component: Menu12,
        meta: {
          menuIndex: 'menu1-2'
        }
      }
    ]
  },
  {
    path: '/menu2',
    component: Menu2,
    meta: {
      menuIndex: 'menu2'
    },
    children: [
      {
        path: 'menu2-1',
        component: Menu21,
        meta: {
          menuIndex: 'menu2-1'
        }
      },
      {
        path: 'menu2-2',
        component: Menu22,
        meta: {
          menuIndex: 'menu2-2'
        }
      }
    ]
  }
]</code></pre>
<p>在父级菜单组件中，设置'default-active'属性：</p>
<pre><code class="language-html"><template>
  <el-menu :default-active="$route.meta.menuIndex" class="el-menu-vertical-demo">
    ...
  </el-menu>
</template></code></pre>