cube-ui中TabBar实现路由跳转

Posted 2020-11-30 zysun622

卡了好半天才弄出来，记录一下吧！

首先默认写法没有写怎么进行路由跳转，看了看文档有这种展开的还算眼熟，就拿它开刀了

 <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-like‘,
        path: ‘/investment‘
      }, {
        label: ‘信用卡‘,
        icon: ‘cubeic-vip‘,
        path: ‘/card‘
      }, {
        label: ‘生活‘,
        icon: ‘cubeic-person‘,
        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)
    }
  }