如何用vue创建“班级和个人信息.html”，使用路由和组件的知识实现 Tab 栏切换案例，在 页面显示“班级信息”和“个人信息”功能，被选中的路由链接高亮显示。 1. “班级信息”组件显示自己所在班级名称、专业和人数 2. “个人信息”组件显示自己的姓名、学号、性别、年龄

要使用Vue创建一个包含“班级信息”和“个人信息”功能的“班级和个人信息.html”页面，并使用路由实现Tab栏切换，你需要完成以下步骤：

1. **创建Vue项目**：
使用Vue CLI创建一个新的Vue项目。如果还没有安装Vue CLI，可以使用npm安装：

   npm install -g @vue/cli
   vue create vue-class-info

按照提示选择配置选项（例如选择Router预设）。

2. **安装Vue Router**：
如果创建项目时没有选择Router预设，需要手动安装Vue Router：

   npm install vue-router

3. **配置Vue Router**：
在项目中创建一个`router`目录，并在其中创建一个`index.js`文件用于配置路由：

   // router/index.js
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import ClassInfo from '../components/ClassInfo';
   import PersonalInfo from '../components/PersonalInfo';

   Vue.use(VueRouter);

   const routes = [
     {
       path: '/class-info',
       component: ClassInfo,
       meta: { title: '班级信息' }
     },
     {
       path: '/personal-info',
       component: PersonalInfo,
       meta: { title: '个人信息' }
     }
   ];

   const router = new VueRouter({
     mode: 'history',
     routes
   });

   router.beforeEach((to, from, next) => {
     document.title = to.meta.title;
     next();
   });

   export default router;

4. **创建组件**：
创建两个组件`ClassInfo.vue`和`PersonalInfo.vue`在`components`目录下：

   <!-- components/ClassInfo.vue -->
   <template>
     <div>
       <h1>班级信息</h1>
       <p>班级名称：计算机科学与技术</p>
       <p>专业：软件工程</p>
       <p>人数：30</p>
     </div>
   </template>

   <!-- components/PersonalInfo.vue -->
   <template>
     <div>
       <h1>个人信息</h1>
       <p>姓名：张三</p>
       <p>学号：12345678</p>
       <p>性别：男</p>
       <p>年龄：20</p>
     </div>
   </template>

5. **注册路由和组件**：
在`main.js`文件中导入并使用路由，并将`router-view`添加到主组件中：

   // main.js
   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';

   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app');

6. **创建导航链接**：
在`App.vue`中，添加`router-link`来创建Tab栏：

   <!-- App.vue -->
   <template>
     <div id="app">
       <nav>
         <router-link to="/class-info">班级信息</router-link>
         <router-link to="/personal-info">个人信息</router-link>
       </nav>
       <router-view></router-view>
     </div>
   </template>

完成以上步骤后，你应该会得到一个页面，它通过路由在“班级信息”和“个人信息”组件之间切换，并且当前激活的路由链接会有高亮显示。