前端实现通过数据id跳转到对应详情页

最好不携带大量数据，可以的话就带一个id字段，在详情页调取接口获取数据

1.首先在父组件插入子组件传递数据(如果你不需要传递数据这步可以省略)

 <!-- 主体内容 -->
 <earlyControlData :commonlyData="immediacyData" />

2.在子组件通过props接收到数据

  props: {
    commonlyData: {
      type: Array,
      default: function() {
        return []
      }
    }
  }

3.定义在当前行点击事件

<!-- 时间 -->
     <div class="item-data-div-span" @click="handleDetails(item.id_)">
          <span>
          <img
           class="img-item time"
           src="@/assets/img/flowStatus/6.png"
           alt=""/>
          <span>时间</span></span>
          <span class="item-all item-time">{{ item.f_sj }}</span>
     </div>

4.通过id处理数据并跳转到对应详情页(尽量使用query传参,先将复杂数据类型转为JSON格式再接收转为复杂数据类型)

(关键代码)

  handleDetails(item) {
      this.data = this.commonlyData.find(item => item.id_ === id) //处理通过id拿到当前id对应的对象数据
      this.$router.push({
        path: "/startApply-details",
        query: { id: item.id, data: encodeURIComponent(JSON.stringify(item)) }
      });
    },

5.最后在详情页拿到了数据

    handelDetailsPage() {
      this.id = this.$route.query.id;
      this.data = JSON.parse(decodeURIComponent(this.$route.query.data))
      console.log(this.id, this.data, "id,data");
    }