vue移动端底部tabbar切换，在想要的页面显示！

轻量、可靠的移动端 Vue 组件库

---

50+ 个组件
90% 单元测试覆盖率
完善的中英文文档和示例
支持按需引入
支持主题定制
支持国际化
支持 TS
支持 SSR

---

至于怎么入手，看官方文档就好啦，说得非常详细。↓

快速入手

---

---

这里要实现的功能是，如下图

效果图
点击进入详情页，然后底部的tabbar不显示。

代码

单独抽出一个tabbar.vue文件

<template>
  <!-- 顶部tab栏 -->
  <div class="top-bar">
    <van-tabbar v-model="minShopActiveBar" @change="handleChangeMinShopTab">
      <van-tabbar-item
        icon="home-o"
        to="MinShopIndex"
      >首页</van-tabbar-item>
      <van-tabbar-item
        icon="cluster-o"
        dot
        to="MinShopCate"
      >团购</van-tabbar-item>
      <van-tabbar-item
        icon="shopping-cart-o"
        :info="cartLength"
        to="MinShopCart"
      >购物车</van-tabbar-item>
      <van-tabbar-item
        icon="user-o"
        to="MinShopMe"
      >我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'minShopTab',

  props: {
    cartLength: {
      type: Number
    }
  },

  data () {
    return {
      minShopActiveBar: '' // 商城的默认选中栏
    }
  },

  mounted () {
    /**
     * 判断当前页面是哪个页面,解决刷新时,tab默认为 1 的bug
     */
    const CURRENTHREF = window.location.hash
    if (CURRENTHREF.includes('MinShopIndex')) {
      this.minShopActiveBar = 0
    } else if (CURRENTHREF.includes('MinShopCate')) {
      this.minShopActiveBar = 1
    } else if (CURRENTHREF.includes('MinShopCart')) {
      this.minShopActiveBar = 2
    } else if (CURRENTHREF.includes('MinShopMe')) {
      this.minShopActiveBar = 3
    }
  },

  methods: {
    /**
     * 切换商城底部tab的方法
     */
    handleChangeMinShopTab () {
      if (this.minShopActiveBar === 0) {
        this.$router.push({
          path: 'MinShopIndex',
          replace: true
        })
      } else if (this.minShopActiveBar === 1) {
        this.$router.push({
          path: 'MinShopCate',
          replace: true
        })
      } else if (this.minShopActiveBar === 2) {
        this.$router.push({
          path: 'MinShopCart',
          replace: true
        })
      } else if (this.minShopActiveBar === 3) {
        this.$router.push({
          path: 'MinShopMe',
          replace: true
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  color: #7d7e80;
  background-color: #fff;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 110;
  .bar-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.05rem 0;
    .icon {
      font-size: 0.2rem;
      margin-bottom: 0.05rem;
    }
    .name {
      font-size: 0.14rem;
    }
  }
}
</style>

---

2. app.vue 文件

在app.vue文件中引入

<template>
  <div id="app">
    <router-view />
    <minShopBar v-if="showMinShopTab" />
  </div>
</template>

<script>
import minShopBar from '@/components/minShopTab'
export default {
  name: 'App',

  data () {
    return {
      showMinShopTab: false
    }
  },

  watch: {
    /**
     * 侦听路由的变化,控制底部tabbar的显示
     */
    '$route' (to, from) {
      if (to.path === 'MinShopIndex' || to.path === '/MinShopCate' || to.path === '/MinShopCart' || to.path === '/MinShopMe') {
        this.showMinShopTab = true
      } else {
        this.showMinShopTab = false
      }
    }
  },

  components: {
    minShopBar
  }
}
</script>

<style lang="scss" scoped>
#app{
  height: 100%;
  background-color: #f0eff5;
  // 设置全局字体
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
</style>

---

记录，只是为了方便自己以后忘记了，翻出来看看，不吐槽。

2019-4-18 19:17