如果在下方有一個單獨的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’} : {}