简单使用van-tabbar实现底部导航

移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。

1、创建底部导航组件

底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。

// Tabbar组件
<template><div><router-view></router-view><van-tabbar v-model="tabbarTempValue" route ><van-tabbar-item name="news" icon="home-o"  replace to="/news">资讯待办</van-tabbar-item><van-tabbar-item name="workBench" icon="friends-o" replace to="/workBench">工作台</van-tabbar-item><van-tabbar-item name="setting" icon="setting-o" replace to="/setting">我的</van-tabbar-item></van-tabbar></div>
</template><script>
export default {name: 'tabbar',props: {active: Number},data () {return {tabbarTempValue: this.active}},methods: {}
}
</script><style scoped></style>

2、子页面引用

// news页面
<template><div>我是news<Tabbar :active=0 /></div></template><script>
import Tabbar from './tabbar'
export default {name: "news",components: {Tabbar},data () {return {}}
}
</script><style scoped></style>

优化van-tabbar使用

虽然上面的方法可以实现底部导航的功能，但是有点牵强。新的思路是创建主页面使用van-tabbar，开启路由模式，配合路由的层级结构实现底部的导航效果，完整的主要代码如下。

1、创建主页面

// homePage页面主页代码
<router-view /><van-tabbar class="layout-tabbar" route  ><van-tabbar-item name="news" icon="home-o"  :to="{name: 'news'}">资讯</van-tabbar-item><van-tabbar-item name="workBench" icon="friends-o"   :to="{name : 'workBench'}">工作台</van-tabbar-item><van-tabbar-item name="setting" icon="setting-o"   :to="{name : 'setting'}">设置</van-tabbar-item></van-tabbar>

2、创建子模块

   子模块代码没有限制

3、配置路由（很重要）

{path: '/',component: _import('modules/mobile/homePage'),children: [{path: '', // 默认子路由name: 'news',component: _import('modules/mobile/news')},{path: '/setting', // 设置name: 'setting',component: _import('modules/mobile/setting')},{path: '/workBench', // 工作台name: 'workBench',component: _import('modules/mobile/workBench')}]

4、总结

路由中配置子路由后开启van-tabbar 的路由模式可以实现底部导航的效果。需要注意van-tabbar 的to如果直接写成to="/seting"的模式会导致首页一直高亮（原因不明欢迎留言）。

vant 组件van-tabbar实现底部导航相关推荐

Tabbar：底部导航栏
定义footbar子组件需要注意的是:useRouter()用来记录当前的路由名称,以便van-tabbar组件显示对应的高亮状态 <template><div class=&qu ...
vant组件popup顶部和底部固定元素
问题: 如果popup里面的内容超出他的高度,用f12审查可以看到popup的位置是在移动的,所以使用sticky组件或者fixed属性都没有效果方案: 限制popup无法滚动,在popup中设置一 ...
使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录一.BottomNavigationBar 组件二.BottomNavigationBarItem 组件三.BottomNavigationBar 底部导航栏代码示例四.BottomN ...
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章一行代代码置灰应用?对就是这么干在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
vue仿美团饿了么--底部导航公共组件
底部导航栏,是每一个页面都需要用的,所以用的公共组件,在app.vue中引入 import common from "./components/footer/common.vue" ...

vant 组件van-tabbar实现底部导航