vue2里面的导航菜单我现在第一次进入这个这个页面选中第一个子菜单，然后怎么让这里 <el-main> <router-view/> </el-main>显示对应的数据

在 Vue2 中，要实现在导航菜单选择后动态更新 `<el-main>` 下的 `router-view` 显示的内容，你需要结合 Vue 的组件化思想以及 Vuex（状态管理库）或者 Vue Router 的 `$route` 对象来实现。以下是基本步骤：

1. **数据绑定**:
首先，确保你的导航菜单是一个响应式组件，并且每个菜单项都有一个关联的路由路径。例如，可以设置一个数组，每个元素包含 `name` 和 `to` 属性。

// 定义一个路由数据模型
const routesData = [
  { name: '菜单A', path: '/menuA', component: MenuAComponent },
  { name: '菜单B', path: '/menuB', component: MenuBComponent }
];

2. **监听路由变化**:
使用 `vue-router` 提供的生命周期钩子 `beforeRouteUpdate` 或者 `mounted`，在路由变化时获取当前激活的路由，并依据该路由去获取对应的组件内容。

// 使用 computed 计算属性或 watch 监听路由变化
computed: {
  activeMenuComponent() {
    return this.$router.currentRoute.meta.component // 如果你有自定义的 meta 信息用于区分组件
    // 或者直接通过名字获取：
    // const menu = routesData.find(item => item.name === this.$route.name);
    // return menu ? menu.component : null;
  }
},
methods: {
  updateContent() {
    if (this.activeMenuComponent) {
      this.$nextTick(() => {
        this.$refs.mainView.render(this.activeMenuComponent); // 假设 mainView 是 el-main 的 ref
      });
    }
  }
},
mounted() {
  this.updateContent();
},
watch: {
  '$route'(to, from) {
    this.updateContent();
  }
}

3. **动态渲染**:
将动态组件渲染到 `<el-main>` 的 `router-view` 上，通常需要一个 `v-if` 或者 `v-component` 渲染策略。

<el-main>
  <router-view v-if="activeMenuComponent"></router-view>
</el-main>

<!-- 或者使用自定义指令 -->
<template #mainView><router-view></router-view></template>
<el-main :content="activeMenuComponent"></el-main>