新建下面三个组件 StudentManage.vue(学生管理页面) OnSchoolStudentManage.vue(在校生管理页面) OutSchoolStudentManage.vue(毕业生管理页面) 实现效果： 点击左侧学生管理菜单在右侧区域展示学生管理页面 在学生管理页面点击在校生管理在下方区域展示在校生管理页面 在学生管理页面点击毕业生管理在下方区域展示在校生管理页面

好的，我理解了你的问题。你需要新建三个组件：`StudentManage.vue`、`OnSchoolStudentManage.vue`、`OutSchoolStudentManage.vue`。其中，`StudentManage.vue`是学生管理页面，`OnSchoolStudentManage.vue`是在校生管理页面，`OutSchoolStudentManage.vue`是毕业生管理页面。你需要实现以下效果：

1. 点击左侧学生管理菜单，在右侧区域展示学生管理页面。
2. 在学生管理页面点击在校生管理，在下方区域展示在校生管理页面。
3. 在学生管理页面点击毕业生管理，在下方区域展示毕业生管理页面。

实现这个功能，你可以按照以下步骤进行：

1. 在`StudentManage.vue`组件中，创建左侧菜单和右侧区域。
2. 在左侧菜单中，添加两个按钮：在校生管理和毕业生管理。
3. 给两个按钮绑定点击事件，在点击事件中切换下方区域的组件。
4. 在`OnSchoolStudentManage.vue`和`OutSchoolStudentManage.vue`组件中，分别编写展示在校生和毕业生列表的代码。
5. 使用`<component>`标签动态展示在校生和毕业生管理组件。

以下是示例代码，仅供参考：

StudentManage.vue

<template>
  <div>
    <div class="left-menu">
      <button @click="showOnSchool">在校生管理</button>
      <button @click="showOutSchool">毕业生管理</button>
    </div>
    <<div class="right-area">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
import OnSchoolStudentManage from './OnSchoolStudentManage.vue'
import OutSchoolStudentManage from './OutSchoolStudentManage.vue'

export default {
  components: {
    OnSchoolStudentManage,
    OutSchoolStudentManage
  },
  data() {
    return {
      currentComponent: 'OnSchoolStudentManage'
    }
  },
  methods: {
    showOnSchool() {
      this.currentComponent = 'OnSchoolStudentManage'
    },
    showOutSchool() {
      this.currentComponent = 'OutSchoolStudentManage'
    }
  }
}
</script>

OnSchoolStudentManage.vue

<template>
  <div>
    <h2>在校生管理</h2>
    <!-- 在校生列表 -->
  </div>
</template>

<script>
export default {
  // 在校生管理组件的代码
}
</script>

OutSchoolStudentManage.vue

<template>
  <div>
    <h2>毕业生管理</h2>
    <!-- 毕业生列表 -->
  </div>
</template>

<script>
export default {
  // 毕业生管理组件的代码
}
</script>