vue-cli3封装全局的tabbar组件

1、对tabbar和tabbarItem进行封装
2、给tabbarItem中传入动态的icon和text文字
3、通过路由动态切换每一个tabbarItem
4、动态切换tabbarItem中的图标和文字

在components中新建tabbar和tabbarItem组件
tabbarItem组件：

<template>
  <div id="tabbar-item" @click="itemClick">
    <div v-if="!isSelected"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-selected"></slot></div>
    <div :style="activeStyle"><slot name="item-text"></slot></div>
    <!-- <div :class="{active: isSelected}"><slot name="item-text"></slot></div> -->
  </div>
</template>

<script>
export default {
  name: "item",
  props: {
      path: String,
      selectedTextColor:{
        type: String,
        default: '#000'
      }
  },
  data () {
      return {
        // isSelected:true
      }
  },
  computed: {
    isSelected(){
      // 判断路由中的路径是否有和item路由中的paths
      // /index ---->  tabbarItem(/index) = true
       // /index ---->  tabbarItem(/city) = false
      //  如果要检索的字符串值没有出现，则返回 -1
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isSelected ? { color: this.selectedTextColor } : {}
    }
  },
  methods: {
    itemClick(){
        this.$router.replace(this.path)
    }
  }
};
</script>

<style lang="scss" scoped>
#tabbar-item{
    flex: 1;
    text-align: center;
    height: 50px;
    font-size: 13px;
    img{
      width: 23px;
      height: 23px;
      margin-top: 2%;
      // 去掉图片下面的像素
      vertical-align: middle;
    }
    .active{
        color: red;
    }
  }
</style>

tabbar页面：

<template>
  <div id="tabbar">
    <!-- 利用插槽来自定义 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  data () {
    return {
      tabbarList:[
        {
          txt:'首页',
          page:'/index', 
          normalImg: require('../../assets/images/indexno.png'),
          selectImg: require('../../assets/images/index.png')
        },
        {
          txt:'同城',
          page:'/city', 
          normalImg: require('../../assets/images/cityno.png'),
          selectImg: require('../../assets/images/city.png')
        },
        {
          txt:'我的',
          page:'/mine', 
          normalImg: require('../../assets/images/indexno.png'),
          selectImg: require('../../assets/images/mine1.png')
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
  #tabbar{
    display: flex;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f6f6f6;
    box-shadow: 0 -3px 1px rgba(100,100,100,.08);
  }
</style>

最后在app.vue中引入注册：

<template>
  <div id="app">
    <tabbar>
      <tabbarItem path="/index" selectedTextColor="#2992FF">
        <img slot="item-icon" src="./assets/images/index.png" alt="">
        <img slot="item-icon-selected" src="./assets/images/indexno.png" alt="">
        <div slot="item-text">首页</div>
      </tabbarItem>
      <tabbarItem path="/city" selectedTextColor="#2992FF">
        <img slot="item-icon" src="./assets/images/cityno.png" alt="">
        <img slot="item-icon-selected" src="./assets/images/city.png" alt="">
        <div slot="item-text">同城</div>
      </tabbarItem>
      <tabbarItem path="/mine" selectedTextColor="#2992FF">
        <img slot="item-icon" src="./assets/images/mine-no.png" alt="">
        <img slot="item-icon-selected" src="./assets/images/mine1.png" alt="">
        <div slot="item-text">我的</div>
      </tabbarItem>
    </tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
  import tabbar from './components/tabbar/tabbar'
  import tabbarItem from './components/tabbarItem/tabbarItem'
  export default {
    data () {
      return {
        
      }
    },
    components: {
      tabbar,
      tabbarItem
    }
  }
</script>

<style>
*{
  margin: 0;
  padding: 0;
}

</style>

进行路由重定向：
在router中的index.js

import Vue from "vue";
import VueRouter from "vue-router";
// import index from "../views/index/index.vue";

Vue.use(VueRouter);

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error => error)
}

const routes = [
  {
    path:"/",
    redirect: "index"
  },
  {
    path: "/index",
    name: "index",
    component: () =>
      import("../views/index/index.vue")
  },
  {
    path: "/city",
    name: "city",
    component: () =>
      import( "../views/city/city.vue")
  },
  {
    path: "/mine",
    name: "mine",
    component: () =>
      import( "../views/mine/mine.vue")
  },
  {
    path: "/classifyDetail",
    name: "classifyDetail",
    component: () =>
      import("../views/classifyDetail/classifyDeatil.vue")
  }
];

const router = new VueRouter({
  routes
});

export default router;