使用vant组件库

路由

{path: '/',
name: 'layout',component: () => import('@/views/layout'),children: [{path: '', // 默认子路由name: 'home',component: () => import('@/views/home')},{path: 'qa',name: 'qa',component: () => import('@/views/qa')},{path: 'video',name: 'video',component: () => import('@/views/video')},{path: 'my',name: 'my',component: () => import('@/views/my')}]
}

layout页面

<template><div class="layout-container"><!-- 子路由出口 --><router-view /><!-- /子路由出口 --><!-- 标签导航栏 --><!--route: 开启路由模式--><van-tabbar class="layout-tabbar" route><van-tabbar-item replace to="/"><!-- <template #icon="props"> --><i slot="icon" class="iconfont icon-shouye"></i><!-- </template> --><span class="text">首页</span></van-tabbar-item><van-tabbar-item replace to="/qa" icon="search"><template #icon="props"><i class="iconfont icon-pinglun"></i></template><span class="text">问答</span></van-tabbar-item><van-tabbar-item replace to="/video" icon="home-o"><template #icon="props"><i class="iconfont icon-shipin"></i></template><span class="text"> 视频</span></van-tabbar-item><van-tabbar-item replace to="/my" icon="search"><template #icon="props"><i class="iconfont icon-wode"></i></template><span class="text"> 我的</span></van-tabbar-item></van-tabbar></div>
</template><script>
export default {name: 'LayoutIndex',components: {},data() {return {};},created() {},mounted() {},methods: {},
}
</script>
<style scoped lang='less'>
.layout-container {.layout-tabbar {i.toutiao {font-size: 40px;}span.text {font-size: 20px;}}
}
</style>