【 cube-ui 】cube-ui中TabBar實現路由跳轉

卡了好半天才弄出來，記錄一下吧！

首先默認寫法沒有寫怎么進行路由跳轉，看了看文檔有這種展開的還算眼熟，就拿它開刀了

 <cube-tab-bar v-model="selectedLabel" show-slider>
    <cube-tab v-for="(item, index) in tabs" :icon="item.icon" :label="item.label" :key="item.label">
    </cube-tab>
  </cube-tab-bar>

官方文檔中說：用於 cube-tab-bar 渲染的數據，數組的每一項是一個 Object 類型，包括 label、icon 和 value（默認值等於 label）1.12.5+，如果使用自定義插槽，可不傳此值

所以，當我給父元素一個change事件的時候，每回打印的都是label中的值，當我們需要路由跳轉，只需要在data中添加path字段，將value動態綁定path就可以獲取到path的值，這樣我們就可以實現跳轉了。

<cube-tab-bar v-model="selectedLabelDefault" @click="changeHandler">
    <cube-tab v-for="item in tabs" :icon="item.icon" :label="item.label" :value="item.path" :key="item.path">
</cube-tab>

 data () {
    return {
      selectedLabelDefault: '/',   //這個是默認選擇的值，當value綁定的是path時，這里也需要寫成path
      tabs: [{
        label: '首頁',
        icon: 'cubeic-home',
        path: '/'
      }, {
        label: '投資',
        icon: 'cubeic-safe-pay',
　　　　　path: '/investment'

 }, { label: '信用卡', icon: 'cubeic-credit-card',
　　　　　path: '/card'

 }, { label: '生活', icon: 'cubeic-mall', path: '/life' }, { label: '我的', icon: 'cubeic-person', path: '/user' }] } }, methods: { changeHandler (path) { // if you clicked different tab, this methods can be emitted this.$router.push(path) } }