Note: here is simulated data real development may not need us to compare whether id is the same or not we only need to send the request when passing the parameter ID to the background background will return the corresponding ID data to us

1 Component page Goodsinfo.vue (click this component to go to the details page)

First, the HTML structure looks like this:

<div v-for="(item, index) in indexlist" :key="index"> 
       <div @click="dianji(item.id)">
          <span>{{ item.GroupEndDate }}</span>  
          <span>{{ item.id }}</span>  
      </div>  
 </div>
Copy the code

Loop through an array to display the data, @click=”dianji(item.id)” for clicking to jump to item.id for clicking on the current element id to pass into the method

Here’s the dianji () method:

dianji(id) { console.log(id,444); //query: {id: = 'miun'; //query: {id: = 'miun'; This.$router.push({name: "miun", query: {id: GoodsCodeid}}); },Copy the code

2 Goods.vue(receive GoodsCodeid from goodsinfo.vue)

created () { console.log(this.$route.query.id, 7777); Id = this.goodscodeId =this.$route.query.id // Then we reassign to GoodsCodeid}, Mounted () {// select * from axios. Sea_result; // select * from axios. Sea_result. {/ / carry parameters GoodsCodeid: enclosing GoodsCodeid},}). Then ((res) = > {this. Indexlist = res. Data. GoodsCode; / / request is successful after the data assigned to indexlist enclosing indexlist. ForEach (item = > {/ / here forEach loop for each item in the array / / and then judge the current array of id like to get id if we click the if (item id === this.goodscodeId){this.indexList = item}}) console.log(this.indexList, 333); }). Catch ((error) => {console.log(error); }); },Copy the code

Note: here is simulated data real development may not need us to compare whether id is the same or not we only need to send the request when passing the parameter ID to the background background will return the corresponding ID data to us