element-ui 实现有一个侧边栏点击后切换对用的内容，不切换路由

Element UI 提供了一个灵活的组件库，其中包括`el-menu`(导航菜单)和`el-submenu`(子菜单)等，可以轻松地实现页面内的内容切换，而无需改变整个路由。要实现侧边栏点击后切换对应的内容，通常的做法是在JavaScript中控制Vue组件的状态。

首先，在你的HTML结构中，设置一个`el-menu`作为侧边栏：

<template>
  <div>
    <el-menu default-active="1" class="侧边栏">
      <el-menu-item index="1">选项一</el-menu-item>
      <el-menu-item index="2">选项二</el-menu-item>
      <!-- 更多菜单项... -->
    </el-menu>

    <div v-if="$route.meta.showContent1" class="content active">内容区域1</div>
    <div v-if="$route.meta.showContent2" class="content">内容区域2</div>
    <!-- 其他内容区域... -->
  </div>
</template>

然后，在Vue实例中监听`el-menu`的`click`事件，并根据点击的菜单项更新`v-if`条件：

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedMenuItem = ref(null); // 存储选中的菜单项

    function handleMenuClick(item) {
      selectedMenuItem.value = item; // 更新当前选中的菜单
      if (item.index === '1') {
        this.$emit('update:showContent1', true); // 显示内容区域1
        this.$emit('update:showContent2', false); // 隐藏内容区域2
      } else {
        // 同理处理其他菜单项...
      }
    }

    return {
      handleMenuClick,
    };
  },
}
</script>

在上面的示例中，我们假设每个菜单项都有一个对应的`$route.meta.showContentX`属性，用于控制其关联的内容显示状态。当用户点击菜单时，通过`this.$emit`广播事件更新这些状态，从而实现内容的切换。