目标：在学习vue-router之后（前端框架Vue自学之Vue router（六）），做一个应用小案例
内容：TabBar
正文：
TabBar
一、tabbar的基本结构的搭建
1、需求
tabbar就是类似下图的东西。可以让我们传入一些组件，图片，文字等。当我们点击“首页”，显示首页的相关东西；当我们点击‘分类’，显示分类的相关东西等。其实，这就是相当于把项目的结构搭建好了，之后我们做的项目中，就是往每个不同的选项构建对应的组件。
2、实现思路
首先，如果在下方有一个单独的TabBar组件，你如何封装？自定义TabBar组件，在App中使用；让TabBar处于底部，并且设置相关的样式。
接着，TabBar中显示的内容由外界决定：定义插槽；flex布局平分TabBar。
接着，自定义TabBarItem，可以传入图片和文字：定义TabBarItem，并且定义两个插槽：图片和文字；给两个插槽外层包装div，用于设置样式；填充插槽，实现底部TabBar的效果。
接着， 传入高亮图片。定义另外一个插槽，插入active-icon的数据。定义一个变量isActive，通过v-show来决定是否显示对应的icon。
接着，TabBarItem绑定路由数据。安装路由（npm install vue-router --save）；完成router/index,js的内容，以及创建对应的组件；main.js中注册router；App中加入<router-view>组件。
接着，点击item跳转到对应路由，并且动态决定isActive。监听item的点击，通过this.$router.replace()替换路由路径；通过this.$route.path.indexOf(this.link)!== -1来判断是否是active。
接着，动态计算active样式。封装新的计算属性：this.isActive?{‘color‘:‘red‘}:{}。
3、
二、
前端框架Vue自学之Vue router小案例TabBar（七）
原文：https://www.cnblogs.com/xinkuiwu/p/12105791.html