目标：在学习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、VScode下，搭建tabbar的基本结构
首先，用Vue CLI2创建项目（Vue CLI3也可以）。目录终端输入vue init webpack tabbar。选项中注意使用runtimeonly（之前博客有分析过），安装路由（没安装也没关系，后面我们手动安装）。
我们先把默认安装的一些东西删除，如自带的HelloWorld.vue，App.vue的对应HelloWorld的引入，样式等。（此时，npm run dev ，页面应该是一片空白的）
注意，我们要用封装的思想，近可能多使用插槽，多复用一些公共的组件的思想。
二、