[vant踩坑] tabbar实现手势滑动切换路由

直接上代码

<van-tabs v-model="active" swipeable>
        <van-tab v-for="(item,index) in arr" :title="item.title" :to="item.path">
         <router-view></router-view>
        </van-tab>
</van-tabs>

data() {
    return {
      active:0,
      arr:[
        {
          title:'点餐',
          path:'/shop/goods'
        },
        {
          title:'评价',
          path:'/shop/ratings'
        },
        {
          title:'商家信息',
          path:'/shop/info'
        },
      ]
    }
  },

watch: {
    active(newVal){
      switch (newVal) {
        case 0: 
          this.$router.push('/shop/goods')
          break;
        case 1: 
          this.$router.push('/shop/ratings')
          break;
        case 2:
          this.$router.push('/shop/info')
          break;
      }
    }
  },