vuecli3+工具中，封装tabbar组件（底部导航栏）

如图，封装tabbar组件（其他项目中可复用）

开发过程：
1、TabBar 和 TabBarItem 组件封装
2、给TabBarItem传入active图片
3、TabBarItem 和 路由（router）结合
4、TabBarItem的颜色动态控制

TabBarItem.vue页面：

<template>
  <div class="tabbar-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>
  div>
template>

<script>
export default {
  name: "tabBarItem",
  props: {
    path: String,
    activeColor: {
      type: String,
      default: "red"
    }
  },
  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);
    }
  }
};
script>

<style lang="scss">
.tabbar-item {
  flex: 1;
  text-align: center;
  height: 49px;

  img {
    width: 24px;
  }
}
style>

tabbar.vue页面

<template>
  <div id="tabbar">
    <slot>slot>
  div>
template>

<script>
export default {
  name: "tabBar"
};
script>

<style lang="scss">
#tabbar {
  display: flex;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f6f6f6;
}

style>

mainTabBar.vue页面(和业务相关的组件，放在components文件夹中的content文件夹中)

<template>
  <tabBar>
    
    <tabBarItem path="/home" activeColor="#CE1F6F">
      <img src="~assets/img/tabbar/home.svg" alt slot="item-icon" />
      <img src="~assets/img/tabbar/home-active.svg" alt slot="item-icon-active" />
      <div slot="item-text">首页div>
    tabBarItem>
    <tabBarItem path="/category" activeColor="#CE1F6F">
      <img src="~assets/img/tabbar/category.svg" alt slot="item-icon" />
      <img src="~assets/img/tabbar/category-active.svg" alt slot="item-icon-active" />
      <div slot="item-text">分类div>
    tabBarItem>
    <tabBarItem path="/shopcar" activeColor="#CE1F6F">
      <img src="~assets/img/tabbar/car.svg" alt slot="item-icon" />
      <img src="~assets/img/tabbar/car-active.svg" alt slot="item-icon-active" />
      <div slot="item-text">购物车div>
    tabBarItem>
    <tabBarItem path="/my" activeColor="#CE1F6F">
      <img src="~assets/img/tabbar/my.svg" alt slot="item-icon" />
      <img src="~assets/img/tabbar/my-active.svg" alt slot="item-icon-active" />
      <div slot="item-text">我的div>
    tabBarItem>
  tabBar>
template>

<script>
import tabBar from "components/common/tabbar/tabBar";
import tabBarItem from "components/common/tabbar/tabBarItem";
export default {
  name: "mainTabBar",
  components: {
    tabBar,
    tabBarItem
  }
};
script>

<style lang="scss">
style>

app.vue页面

<template>
  <div id="app">
    <router-view />
    <main-tab-bar />
  
  div>
template>
<script>
import mainTabBar from "components/content/mainTabBar/mainTabBar"
export default {
  name: "App",
  components: {
    mainTabBar
  }
};
script>
<style lang="scss">
@import url("assets/css/normalize.css");

style>

router文件夹中的index.ts页面：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "views/home/Home.vue";
import category from "views/category/category.vue";
import shopcar from "views/shopcar/ShopCar.vue";
import my from "views/my/My.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/home' //重定向
  },
  {
    path: "/home",
    name: "home",
    component: Home
  },
  {
    path: "/category",
    name: "category",
    component: category
  },
  {
    path: "/shopcar",
    name: "shopcar",
    component: shopcar
  },
  {
    path: "/my",
    name: "my",
    component: my
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
});

export default router;