请使用Vue路由相关知识动手实现一个可运行的Tab栏切换案例，要求如下： 4.1、创建一个components/Message.vue组件，用来展示页面内容。 4.2、创建三个子路由，分别是“待付款”“待发货”“待收货”页面，在每个子路由页面单独写出相应的内容。

好的，我来为您实现这个Tab栏切换案例。

首先，我们需要在Vue项目中安装Vue Router，可以使用以下命令进行安装：

npm install vue-router --save

然后，在main.js中引入Vue Router并配置路由：

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

Vue.use(VueRouter)

const routes = [
  { path: '/message', component: Message, children: [
    { path: 'unpaid', component: Unpaid },
    { path: 'undelivered', component: Undelivered },
    { path: 'unreceived', component: Unreceived },
  ]}
]

const router = new VueRouter({
  routes
})

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

在上面的代码中，我们定义了一个Message组件，并在其下定义了三个子路由分别对应“待付款”“待发货”“待收货”页面。我们使用Vue Router中的`children`选项来定义子路由。

接下来，我们在Message组件中添加一个Tab栏，用来切换不同的子路由页面：

<template>
  <div>
    <ul>
      <li><router-link to="/message/unpaid">待付款</router-link></li>
      <li><router-link to="/message/undelivered">待发货</router-link></li>
      <li><router-link to="/message/unreceived">待收货</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

在上面的代码中，我们使用`router-link`组件来生成Tab栏的各个选项，并使用`to`属性来指定对应的路由路径。我们还在组件中添加了一个`router-view`组件，用来渲染当前子路由页面的内容。

最后，我们需要编写三个子路由对应的组件Unpaid、Undelivered和Unreceived，分别用来展示“待付款”“待发货”“待收货”页面的内容。这里我们只展示一个子组件的代码，其他两个组件的代码类似：

<template>
  <div>
    <h2>待付款页面</h2>
    <p>这是待付款页面的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Unpaid'
}
</script>

好了，现在我们就完成了一个简单的Tab栏切换案例。您可以在自己的Vue项目中尝试运行这个案例，体验一下Tab栏切换的效果。