vant2实现点击单元格进入对应的Tab标签页展示内容

一、组件
1、进行跳转的Grid宫格作为跳转


  <div>
    <van-grid>
      <van-grid-item icon="photo-o" text="全部" />
      <van-grid-item icon="photo-o" text="待发货" />
      <van-grid-item icon="photo-o" text="待付款" />
      <van-grid-item icon="photo-o" text="待评价" />
    </van-grid>
  </div>




 


 2、点击跳转后的Tab标签页


这里用vant2里面Tab里面的基础用法


<template>
  <div>
    <van-tabs v-model="active">
        <van-tab title="全部">全部</van-tab>
        <van-tab title="待付款">待付款</van-tab>
        <van-tab title="已付款">已付款</van-tab>
        <van-tab title="待评价">待评价</van-tab>
      </van-tabs>
  </div>
</template>
 
<script>
export default {
    data() {
    return {
      active: 2,
    };
  },
}
</script>


 


 然后把这个Tab标签的组件配置路由


二、给Grid加上to属性和路由路径
    <van-grid>
      <van-grid-item icon="photo-o" text="全部" to="/info" />
      <van-grid-item icon="photo-o" text="待发货" to="/info"/>
      <van-grid-item icon="photo-o" text="待付款" to="/info"/>
      <van-grid-item icon="photo-o" text="待评价" to="/info"/>
    </van-grid>
这个时候四个格子都可以跳转到Tab的组件，但是在Tab组件中active的默认值是2，四个格子跳转后都是展示第三个tab页内容






三、给to属性添加参数
在to属性的路径后面，拼接?问号，然后用属性:属性值进行传递


是     /路径?请求参数


不是 /路径/请求参 （在这里卡了好长时间没发现）


    <van-grid>
      <van-grid-item icon="photo-o" text="全部" to="/info?id=0" />
      <van-grid-item icon="photo-o" text="待发货" to="/info?id=1"/>
      <van-grid-item icon="photo-o" text="待付款" to="/info?id=2"/>
      <van-grid-item icon="photo-o" text="待评价" to="/info?id=3"/>
    </van-grid>
 四、在B组件中让active接收传递的id值，并转为数字类型
<script>
export default {
    data() {
    return {
      active: Number(this.$route.query.id)
    };
  },
}
</script>
用：this.$route.query.id  获取到传递来的id值，赋值给active，就可以去控制active的值了，需要转为数字类型


    return {
      active: +this.$route.query.id
    };