vue tabbar结构的基本搭建，自定义菜单个数以及菜单选中颜色

一、要实现常见应用tabbar效果，总共四个菜单、分别是首页、分类、购物车和我的，点击哪一个则显示哪一个页面的内容

二、具体实现关键过程如下

1. 在components文件夹中新建tabbar文件夹，分别建立TabBar.vue文件以及TabBarItem.vue文件
   TabBar.vue

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>

</script>

<style>
  #tab-bar {
    display: flex;
    background: #f6f6f6;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px -2px 1px rgba(100, 100, 100, 0.1);
  }
</style>

TabbarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
    <!-- <img src="../../assets/img/tabbar/icon_home_nor.png">
    <div>首页</div> -->
  </div>
</template>

<script>
  export default {
    name: "TabBaritem",
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'#1296db'
      }
    },
    data() {
      return {
        // isActive: true
      }
    },
    computed:{
      isActive(){
      //判断是否高亮显示
        return this.$route.path.indexOf(this.path)!==-1
      },
      activeStyle(){
        return this.isActive?{color:this.activeColor}:{}
      }
    },
    methods:{
      itemClick(){
        this.$router.replace(this.path).catch(error=>error)//防止点击多次报错
        console.log("itemclick")
      }
    }
  }
</script>

<style>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

2. 在assets文件夹中添加相应的资源文件
   

3. App.vue中实现自己想要的tabbar菜单。想要几个菜单就直接写一个tabbaritem即可，activeColor可以更改选中菜单的颜色

<template>
  <div id="app">
    <tab-bar>
      <tab-bar-item path="/home" activeColor="#1296db">
        <img slot="item-icon" src="./assets/img/tabbar/icon_home_nor.png" alt="">
        <img slot="item-icon-active" src="./assets/img/tabbar/icon_home_selected.png" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="#1296db">
        <img slot="item-icon" src="./assets/img/tabbar/icon_category_nor.png" alt="">
        <img slot="item-icon-active" src="./assets/img/tabbar/icon_category_selected.png" alt="">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="#1296db">
        <img slot="item-icon" src="./assets/img/tabbar/icon_car_nor.png" alt="">
        <img slot="item-icon-active" src="./assets/img/tabbar/icon_car_selected.png" alt="">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="#1296db">
        <img slot="item-icon" src="./assets/img/tabbar/icon_profile_nor.png" alt="">
        <img slot="item-icon-active" src="./assets/img/tabbar/icon_profile_selected.png" alt="">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
  import TabBar from './components/tabbar/TabBar.vue'
  import TabBarItem from './components/tabbar/TabBarItem.vue'
  export default {
    name: 'App',
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

<style>
  @import url("./assets/css/base.css");
</style>

5. 设置路由

import Vue from 'vue'
import Router from 'vue-router'
const Home=()=>import('../views/home/Home');
const Category=()=>import('../views/category/Category');
const Cart=()=>import('../views/cart/Cart');
const Profile=()=>import('../views/profile/Profile');
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    {
      path:'',
      redirect:'/home'
    },{
      path:'/home',
      component:Home,
    },
    ,{
      path:'/category',
      component:Category,
    },
    {
      path:'/cart',
      component:Cart,
    },
    {
      path:'/profile',
      component:Profile,
    }
  ]
})

整体目录结构如下：