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

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

简单使用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"的模式会导致首页一直高亮（原因不明欢迎留言）。