一、实验要求:
请使用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,但我们不会。