vue-5-2 tabbar的完善

当整体tabbar完成，开始完善。此时，暂时与tabBar组件无关，只调整App.vue和tabBarItem组件

1. 点击某个tabBarItem后，显示该item被选中的icon，并且显示内容

　　1.  创建路由index.js， 并且添加路由对应的.vue组件

　　2. 将tabBarItem组件与路由条目相关联

　　　　1. 四个item，与不同的路由条目关联，所以不能写死在tabBarItem中，而是通过App.vue向其传入路由条目，而tabBarItem中，使用props接收路由条目后，进行跳转即可

　　　　App.vue组件中：

　　　　2. tabBarItem组件中：

　　　　　　1. 通过props接收 link 传入的路由条目

　　　　　　2. 通过v-on绑定事件onclik，onclik事件被触发时，进行路由跳转：this.$router.replace(this.link)

　　　　　　3. 在接收 icon 图片的 slot 中通过 v-if 来判断计算属性isActive是否为true,而isActive计算属性中，则通过this.$route.path.indexOf(this.link) !== -1 来判断传入的路由条目是否是活跃路由，从而返回结果true或false

　　　　　　2. 在App.vue中点击哪个item，则显示其被选中时的icon

　　3. 其它可自定义：item选中后的字体颜色，希望能手动传入，而不是自动固定颜色

　　调整：

　　　　1. 在tabBarItem组件的props中，创建新的接收参数，如activeColor

　　　　2. 在tabBarItem组件的标签中，文字显示部分，标签中动态绑定:style属性，而给style赋予的样式，则使用新的计算属性activeStyle的返回值来作为样式。

　　　　　　activeStyle计算属性中，获取另一个计算属性isActive的返回值，从而设置：当某条路由活跃时，使用传入activeColor的值作为color的值。 

　　　　　　　　return this.isActive ? {color: this.activeColor} : {}

　　　　　　tabBarItem组件修改后：

　　　　　　App.vue中则是：

2. 补充知识点：

　　（像上边手动传入字体颜色时不使用此该方法）

　　当标签中使用v-bind直接绑定class设置样式时

　　:class="{active: isActive}"

　　active是下边中设置的样式的名称： .active{ color: yellow; }

　　isActie是判断条件

3.  完整写法，创建一个新的vue组件，MainTabBar组件，用来代替App.vue组件接收TabBar和TabBarItem组件，调用两个组件并传递所需参数

　　而App.vue中，导入MainTabBar组件，注册后使用即可