定义父级页面

<template>
  <div>
    <!--子路由出口 ↓-->
    <router-view />
    <!--底部导航栏 ↓-->
    <van-tabbar route>
      <van-tabbar-item to="/home">  <span class="text">首页</span>  </van-tabbar-item>
      <van-tabbar-item to="/qa">  <span class="text">问答</span>  </van-tabbar-item>
      <van-tabbar-item to="/video">  <span class="text">视频</span>   </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

路由配置

router/index.js： 在父路由中使用redirect配置默认子路由，这样才不会出现默认子路由无法加载的情况。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'LoginPage',
    component: () => import('@/views/login') //路由懒加载
  }, {
    path: '/', //默认父路由
    component: () => import('@/views/layout'),
    redirect: '/home', //这里我们要使用redirect配置默认子路由
    children: [{
        path: '/home',
        name: 'HomePage',
        component: () => import('@/views/layout/home/HomePage.vue')
      },{
        path: '/qa',
        name: 'QaPage',
        component: () => import('@/views/layout/qa/QaPage.vue')
      },{
        path: '/video',
        name: 'VideoPage',
        component: () => import('@/views/layout/video/VideoPage.vue')
      },]
  }]

const router = new VueRouter({
  routes
})

export default router