请使用 Vue 路由相关知识动手实现Tab栏切换案例，要求如下。 ①创建一个 components/Message yue 组件，用来展示页面内容。 ②创建3个千路由，分别是“待付款”“待发货”“待收货” 页面，在每个子路由页面单 独写出相应的肉容，页百效果如图5-18 所示。

好的，我来为您介绍如何使用Vue路由实现Tab栏切换案例。

首先，需要安装Vue Router，可以使用以下命令进行安装：

npm install vue-router --save

接下来，在main.js中引入Vue Router并注册路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Message from './components/Message.vue'
import WaitPay from './components/WaitPay.vue'
import WaitSend from './components/WaitSend.vue'
import WaitReceive from './components/WaitReceive.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Message },
  { path: '/wait-pay', component: WaitPay },
  { path: '/wait-send', component: WaitSend },
  { path: '/wait-receive', component: WaitReceive }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在上述代码中，我们定义了四个组件，分别是Message、WaitPay、WaitSend和WaitReceive，并且定义了四个路由，分别对应这四个组件。其中，根路由'/'对应的是Message组件。

接下来，在App.vue中编写Tab栏的代码：

<template>
  <div class="app">
    <div class="tab-bar">
      <router-link to="/">消息</router-link>
      <router-link to="/wait-pay">待付款</router-link>
      <router-link to="/wait-send">待发货</router-link>
      <router-link to="/wait-receive">待收货</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #eee;
  padding: 10px 0;
}
.tab-bar a {
  color: #333;
  text-decoration: none;
}
.tab-bar a.router-link-exact-active {
  color: #f00;
}
</style>

在上述代码中，我们使用了Vue Router提供的router-link组件来实现Tab栏的切换。router-view组件用来渲染当前路由所对应的组件。

最后，在Message、WaitPay、WaitSend和WaitReceive组件中编写页面内容即可。

完整代码如下：

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Message from './components/Message.vue'
import WaitPay from './components/WaitPay.vue'
import WaitSend from './components/WaitSend.vue'
import WaitReceive from './components/WaitReceive.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Message },
  { path: '/wait-pay', component: WaitPay },
  { path: '/wait-send', component: WaitSend },
  { path: '/wait-receive', component: WaitReceive }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue

<template>
  <div class="app">
    <div class="tab-bar">
      <router-link to="/">消息</router-link>
      <router-link to="/wait-pay">待付款</router-link>
      <router-link to="/wait-send">待发货</router-link>
      <router-link to="/wait-receive">待收货</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #eee;
  padding: 10px 0;
}
.tab-bar a {
  color: #333;
  text-decoration: none;
}
.tab-bar a.router-link-exact-active {
  color: #f00;
}
</style>

Message.vue

<template>
  <div class="message">
    <h2>消息中心</h2>
    <p>您暂无新的消息</p>
  </div>
</template>

<style>
.message {
  padding: 20px;
}
</style>

WaitPay.vue

<template>
  <div class="wait-pay">
    <h2>待付款</h2>
    <ul>
      <li>订单1</li>
      <li>订单2</li>
      <li>订单3</li>
    </ul>
  </div>
</template>

<style>
.wait-pay {
  padding: 20px;
}
.wait-pay ul {
  list-style: none;
  padding-left: 0;
}
.wait-pay li {
  line-height: 2;
}
</style>

WaitSend.vue

<template>
  <div class="wait-send">
    <h2>待发货</h2>
    <ul>
      <li>订单4</li>
      <li>订单5</li>
    </ul>
  </div>
</template>

<style>
.wait-send {
  padding: 20px;
}
.wait-send ul {
  list-style: none;
  padding-left: 0;
}
.wait-send li {
  line-height: 2;
}
</style>

WaitReceive.vue

<template>
  <div class="wait-receive">
    <h2>待收货</h2>
    <ul>
      <li>订单6</li>
      <li>订单7</li>
      <li>订单8</li>
    </ul>
  </div>
</template>

<style>
.wait-receive {
  padding: 20px;
}
.wait-receive ul {
  list-style: none;
  padding-left: 0;
}
.wait-receive li {
  line-height: 2;
}
</style>