vue3.0 仿微信实时通信Tab切换与子路由

需求:底部有tab切换;点击当前会显示对应的子页面

效果图

tab子组件:

 

创建四个页面:

Chats.vue,Contacts.vue,Discover.vue,Me.vue 

 路由页面:

import Index from './views/Index.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/chats',//这里给一个重定向(默认)的路径是因为页面一进入的时候有一个图标需要有选中状态
      component: Index,
      children: [
        {
          path: '/chats',
          name: 'chats',
          component: () => import('./views/Chats.vue')
        },
        {
          path: '/contacts',
          name: 'contacts',
          component: () => import('./views/Contacts.vue')
        },
        {
          path: '/discover',
          name: 'discover',
          component: () => import('./views/Discover.vue')
        },
        {
          path: '/me',
          name: 'me',
          component: () => import('./views/Me.vue')
        }
      ]
    },)

index.vue页面配置

子页面写法:(这里只写一页面;其它三个页面写法类似就不粘上来了)