vue element左侧菜单右侧根据左侧显示内容

在Vue.js结合Element UI中创建一个动态左侧菜单和右侧内容联动的效果，通常会使用`v-for`指令遍历左侧菜单的数据，并监听路由变化来更新右侧展示的内容。这涉及到组件化开发、路由管理以及响应式数据绑定。

首先，你需要设置左侧的导航菜单为一个组件，比如`NavigationDrawer.vue`，它应该包含一个`v-for`循环来渲染菜单项：

<template>
  <el-menu :default-active="$route.path" router>
    <el-menu-item v-for="(item, index) in menuItems" :key="index" :to="{ path: item.path }">
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        // ...左侧菜单数组
      ]
    };
  }
};
</script>

然后，在主应用组件（如`App.vue`）中引入并监控路由变化：

<template>
  <div id="app">
    <NavigationDrawer />
    <router-view></router-view>
  </div>
</template>

<script>
import NavigationDrawer from './components/NavigationDrawer.vue';
// ...

export default {
  components: { NavigationDrawer },
  mounted() {
    this.$router.afterEach(() => {
      this.$refs.navigationDrawer.updateContent(); // 更新右侧内容函数
    });
  }
};
</script>

在`NavigationDrawer`组件中，你可以添加一个`updateContent`方法来获取当前激活的路由路径，然后根据这个路径去请求相应的右侧内容数据。如果数据不在初始预设中，可以根据需要进一步处理，例如异步加载数据。

methods: {
  updateContent() {
    const activePath = this.$route.path;
    // 根据activePath从服务器或本地获取右侧内容
    // 这里假设有一个async方法loadContent
    this.content = await this.loadContent(activePath);
  },
  loadContent(path) {
    // ...实际的加载逻辑
  }
}