使用vue路由相关知识实现Tab栏切换案例 创建一个components/Message.vue组件用来展示页面内容创建三个子路由分别是“待付款”“待发货”“待收货”页面在每个子路由页面单独写出相应的内容
时间: 2023-11-18 18:02:28 浏览: 93
首先,在router/index.js中定义路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Message from '@/components/Message'
import Payment from '@/components/Payment'
import Shipping from '@/components/Shipping'
import Receipt from '@/components/Receipt'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Message',
component: Message,
children: [
{
path: 'payment',
name: 'Payment',
component: Payment
},
{
path: 'shipping',
name: 'Shipping',
component: Shipping
},
{
path: 'receipt',
name: 'Receipt',
component: Receipt
}
]
}
]
})
```
然后,创建Message.vue组件,并在组件中使用<router-view>标签来展示子路由组件:
```html
<template>
<div>
<ul>
<li><router-link to="/payment">待付款</router-link></li>
<li><router-link to="/shipping">待发货</router-link></li>
<li><router-link to="/receipt">待收货</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message'
}
</script>
```
最后,创建三个子路由组件Payment.vue、Shipping.vue和Receipt.vue,并在组件中写出相应的内容:
```html
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data () {
return {
title: '',
content: ''
}
},
created () {
switch (this.$route.name) {
case 'Payment':
this.title = '待付款'
this.content = '您有一笔订单待付款,请尽快完成支付。'
break
case 'Shipping':
this.title = '待发货'
this.content = '您的订单已付款,正在等待发货。'
break
case 'Receipt':
this.title = '待收货'
this.content = '您的订单已发货,请注意查收。'
break
}
}
}
</script>
```