vue 简单的底部tabbar栏切换

1.在componets文件夹中创建一个TabbarItem.vue的子组件

<template>
    <div id="tabbarItem" @click="changePage">
        <span v-show="!isShow">
            <slot name="src"></slot>
        </span>
        <span v-show="isShow">
            <slot name="active_src"></slot>
        </span>
        <span v-text="title">{{title}}</span>
    </div>
</template>
<script>
export default {
  name: 'TabbarItem',
  props: {
    title: {
      type: String
    },
    page: {
      type: String
    },
    sel: {
      type: String
    },
    id: {
      type: Number
    }
  },
  data () {
    return {

    }
  },
  computed: {
// 这里是切换底部图片用的
    isShow: function () {
      if (this.sel === this.page) {
        return true
      }
      return false
    }
  },
  methods: {
    changePage () {
      // 点击跳转到对应的页面
      if (this.id === 0) {
        this.$router.push({ path: '/' })
      } else if (this.id === 1 && this.$store.state.routerWo !== 'worksDetail') {
        this.$router.push({ path: '/mb/worksDetail/' + this.$store.state.wId })
      } else if (this.id === 2) {
        this.$router.push({ path: '/mb/exhibition/' + this.$store.state.wId })
      } else if (this.id === 3 && this.$store.state.routerWo !== 'authorDetail') {
        this.$router.push({ path: '/mb/' + this.page + '/' + this.$store.state.authorId })
      }
      this.$emit('change', this.page)
    }
  }
}
</script>
<style lang="less" scoped>
#tabbarItem {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    span {
        font-size: .875rem;
    }
}
</style>

1.在componets文件夹中再创建一个Tabbar.vue的子组件(和tabbarItem同层级)

<template>
    <div id="tabbarWrap">
        <div class="warp">
              <Tabbar-item v-for="(item,index) in dataList" :key="index" :title='item.title' :id="item.id" :page='item.page' @change='getVal' :sel="selected">
                <img :src="item.src" slot="src" />
                <img :src="item.active_src" slot="active_src" />
              </Tabbar-item>
            </div>
        </div>
</template>
<script>
import TabbarItem from './TabbarItem'
export default {
  components: {
    TabbarItem
  },
  props: {
// 这里是普通组件传过来的值
    workinfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      selected: 'worksDetail',
      isShowAuthor: false,
      isShowGoWorks: false,
      id: 0,
      dataList: [
        {
          title: '主页',
          page: '',
          id: 0,
        // 图片要用require才能生效
          src: require('../../assets/home.png'),
          active_src: require('../../assets/home_active.png'),
          isActive: true
        },
        {
          title: '作品',
          page: 'worksDetail',
          id: 1,
          src: require('../../assets/works_active.png'),
          active_src: require('../../assets/works.png'),
          isActive: false
        },
        {
          title: '全景观展',
          page: 'exhibition',
          id: 2,
          src: require('../../assets/allview.png'),
          active_src: require('../../assets/allview.png'),
          isActive: false
        },
        {
          title: '作者',
          page: 'authorDetail',
          id: 3,
          src: require('../../assets/mine.png'),
          active_src: require('../../assets/mine_active.png'),
          isActive: false
        }
      ]
    }
  },
  mounted () {
    this.selected = this.$route.path.split('/')[1]
  },
  methods: {
    getVal (res) {
      this.selected = res
    }
  },
  computed: {
    path () {
      return this.$route.path
    }
  }
}
</script>
<style lang="less" scoped>
#tabbarWrap{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: .3125rem;
  background-color: #fff;
  z-index: 9;
  .warp {
    width: 100%;
    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0;
    img {
      width: 1.875rem;
      height: 1.875rem;
    }
  }
    img {
    margin-top: .625rem;
    margin-bottom: .3125rem;
  }
}
</style>

3.在需要的vue文件引入tabbar文件就行

最好做个判断，等workinfo有值的时候才渲染组件，可以判断其他的，比如数组的长度之类的
<Tabbar :workinfo="workinfo" v-if="workinfo"></Tabbar>