element-plus Menu在使用的时候，我们需要点击菜单后跳转到对应的路由页面，并且默认展开当前路由所在的分组，以及记过当前所在的菜单

element-plus menu说明文档

激活路由模式

将:router="true"后，点击菜单就可以实现路由跳转了。

当前菜单高亮

通过default-active来设置当前高亮的菜单路由，我们可以通过监听路由进行动态更新

当前菜单所在分组展开

通过default-openeds来设置当前菜单所在分组展开，我们可以通过监听路由变化来进行更新

完整代码

html

<el-menu
  active-text-color="#ffd04b"
  background-color="rgba(21, 81, 159, 1.00)"
  class="el-menu-vertical-demo"
  :default-active="active"
  :default-openeds="openeds"
  :router="true"
  text-color="#fff"
>
<el-sub-menu :index="item.url" v-for="(item,index) in list" :key="index">
  <template #title>
    <span>{{ item.title }}</span>
  </template>
  <el-menu-item :index="item2.url" v-for="(item2,index2) in item.children" :key="index2">{{ item2.title }}
  </el-menu-item>
</el-sub-menu>
</el-menu>

js

<script>
export default {
  name: "sidebar",
  components: {},
  data() {
    return {
      openeds: [0],
      active: '',
      list: [
        {
          title: 'ui组件',
          url: '0',
          children: [
            {
              title: '卡片',
              url: '/card'
            },
            {
              title: '底座',
              url: '/dizuo'
            },
          ]
        },
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.active = to.path
      this.list.forEach((type, index) => {
        type.children.forEach((type2) => {
          if (type2.url == this.active) {
            this.openeds = [type.url]
          }
        });
      });
    }
  },
}
</script>