vue实验报告5 Tab栏的切换案例（使用路由）

一、实验要求：

请使用Vue路由相关知识手动实现Tab栏切换案例，要求如下：

a.创建一个components/Message.vue组件，用来展示页面内容。

b.创建3个子路由，分别是“待付款”“待发货”“待收货”页面，在每个子路由页面单独写出相应的内容。

三个选项在初始界面的风格是三者平分于一行，且每个都有个红色边框。

且点击后由黑字白底变成白字蓝底。

c.使用一个HTML文件或者vue项目实现该案例

二、怎么创建一个vue项目 

首先点开cmd,输入vue ui

然后会在浏览器自动打开一个网页（绿色的）

然后点击创建新项目

然后点击在哪里创建（不用新建文件夹，直接把你想要放的地方地址输入上去就行，支持中文地址）

然后在第一个页面的中间下拉箭头选npm，没下的找教程下npm

然后第二个界面，选手动，一定要选手动，不然所有东西都自动下最新版，旧版本语言在里面运行不了

接下来的用哪个勾选哪个，比如这一节就用的router，就勾上，后面自动会选版本号。

然后就是最重要的一步，属于是旧版本的自作多情，因为没选vue3，因为教材太老，所以我们学的是2.x所以只能选2.x，不然很多语法压根就不一样，羡慕后面学vue3的同学。

然后这个就选不保存预设就行

然后就是漫长的等待，毕竟不是咱们国家创的东西，要下载很长时间，好几分钟。

三、实验代码及成果（成果就是展示图在上面要求里面有，点击会变色，就是颜色可能不太对，你们看着改）

 

components/Message.vue文件：

<!-- components/Message.vue -->

<template>

  <div>

    <router-view></router-view>

  </div>

</template>

<script>

export default {

  name: 'Message'

  // 你可以在这里添加组件的具体内容

}

</script>

router/index.js：

import Vue from 'vue'

import Router from 'vue-router'

import Message from '@/components/Message.vue'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/message',

      name: 'Message',

      component: Message,

      children: [

        {

          path: 'pending-payment',

          name: 'PendingPayment',

          component: {

            template: '<div>待付款页面内容</div>'

          }

        },

        {

          path: 'pending-shipping',

          name: 'PendingShipping',

          component: {

            template: '<div>待发货页面内容</div>'

          }

        },

        {

          path: 'pending-receipt',

          name: 'PendingReceipt',

          component: {

            template: '<div>待收货页面内容</div>'

          }

        }

      ]

    }

  ]

})

App.vue：

<template>

  <div id="app">

    <div class="tabContainer">

      <router-link to="/message/pending-payment" class="tab" active-class="activeTab">待付款</router-link>

      <router-link to="/message/pending-shipping" class="tab" active-class="activeTab">待发货</router-link>

      <router-link to="/message/pending-receipt" class="tab" active-class="activeTab">待收货</router-link>

    </div>

    

    <router-view></router-view>

  </div>

</template>

<style>

/* ... other styles ... */

.tabContainer {

  display: flex;

}

.tab {

  flex: 1;

  border: 1px solid red;

  padding: 8px;

  cursor: pointer;

  text-decoration: none;

  color: black;

  background-color: white;

  text-align: center;

}

.activeTab {

  color: white;

  background-color: blue;

}

</style>

main.js文件不用动。

四、实验结论

1.export default 是 JavaScript 中用于导出模块、函数、类或对象的语法。它的作用是将一个模块的默认输出指定为某个值，使得其他文件可以使用 import 关键字来导入这个默认输出。

2.router给我的感觉就像是跳转，而<router-link>标签给我的感觉就像是ppt里面的。

3.一定要注意版本，可以直接在vue ui里面选择手动设置，只能用vue2，下个学期的新生会学vue3，但我们不会。