运用vue路由的相关知识，实现嵌套路由，完成一个班级介绍网页，要求左边栏显示,关于班级，班干成员，班级成员;班干成员中包含有班长简介，团支书简介;2020250721013点击班长简介和团支书简可出现相关介绍;班级成员中写上自己的姓名学号。 (20分)

首先，在 Vue 项目中创建一个名为 "ClassIntroduction" 的组件，作为班级介绍网页的主页面。然后，在该组件中定义嵌套路由，在左边栏显示三个选项，分别对应三个子路由，即 "aboutClass"、"cadreMember" 和 "classMember"。

<template>
  <div>
    <div class="sidebar">
      <ul>
        <router-link to="/classIntroduction/aboutClass">关于班级</router-link>
        <router-link to="/classIntroduction/cadreMember">班干成员</router-link>
        <router-link to="/classIntroduction/classMember">班级成员</router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "ClassIntroduction",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {},
  router: {
    routes: [
      {
        path: "/classIntroduction",
        component: ClassIntroduction,
        children: [
          {
            path: "aboutClass",
            component: AboutClass
          },
          {
            path: "cadreMember",
            component: CadreMember,
            children: [
              {
                path: "classLeader",
                component: ClassLeader
              },
              {
                path: "teamSecretary",
                component: TeamSecretary
              }
            ]
          },
          {
            path: "classMember",
            component: ClassMember
          }
        ]
      }
    ]
  }
};
</script>

在 "cadreMember" 子路由中又定义了两个嵌套路由，分别对应班长简介和团支书简介。因此，我们还需要创建 "CadreMember" 组件，用于显示班干成员子路由。

<template>
  <div>
    <h2>班干成员</h2>
    <div class="cadre-sidebar">
      <ul>
        <router-link to="/classIntroduction/cadreMember/classLeader">班长</router-link>
        <router-link to="/classIntroduction/cadreMember/teamSecretary">团支书</router-link>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "CadreMember",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
};
</script>

在 "CadreMember" 组件中也定义了一个嵌套路由，用于显示班长和团支书的介绍。因此，我们还需要创建 "ClassLeader" 和 "TeamSecretary" 组件，用于显示班长和团支书的介绍。

<template>
  <div>
    <h2>班长介绍</h2>
    <p>2020250721013是本班的班长，负责班级管理和组织协调工作。</p>
  </div>
</template>

<script>
export default {
  name: "ClassLeader",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
};
</script>

<template>
  <div>
    <h2>团支书介绍</h2>
    <p>2020250721013是本班的团支书，负责团支部工作和协助班长工作。</p>
  </div>
</template>

<script>
export default {
  name: "TeamSecretary",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
};
</script>

最后，我们还需要创建 "AboutClass" 组件和 "ClassMember" 组件，用于显示关于班级和班级成员的信息。

<template>
  <div>
    <h2>关于班级</h2>
    <p>本班是一支优秀的学习班级，成员团结友爱，互帮互助，共同进步。</p>
  </div>
</template>

<script>
export default {
  name: "AboutClass",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
};
</script>

<template>
  <div>
    <h2>班级成员</h2>
    <p>2020250721013</p>
  </div>
</template>

<script>
export default {
  name: "ClassMember",
  components: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  destroyed() {}
};
</script>

最终，我们的班级介绍网页就完成了。用户可以通过左边栏中的选项，查看关于班级、班干成员和班级成员的信息，并且在班干成员中还可以查看班长和团支书的介绍。