注意：这里是模拟数据 真实开发可能不需要我们来比较id是不是一样 我门只需要发送请求的时候传入参数id给后台 后台就会返回对应id的数据给我们
1组件页面GoodsInfo.vue(点击该组件跳转到详情页)
首先html结构是这样的：
<div v-for="(item, index) in indexlist" :key="index">
<div @click="dianji(item.id)">
<span>{{ item.GroupEndDate }}</span>
<span>{{ item.id }}</span>
</div>
</div>
循环一个数组把数据展示出来，@click="dianji(item.id)"为点击跳转item.id参数为点击当前元素的id传到方法里面
下面来看dianji（）方法里面：
dianji(id) {
console.log(id,444); // 这里的id就是我们上面传下来的id
let GoodsCodeid = id //把id重新赋值
//这里就是跳转name: "miun"是指跳转到miun页面上面
//query: { id: GoodsCodeid}就是我们跳转过去需要带的参数
this.$router.push({ name: "miun", query: { id: GoodsCodeid} });
},
2商品详情页面Goods.vue(接收商品组件页面GoodsInfo.vue传过来的GoodsCodeid)
created () { console.log(this.$route.query.id, 7777); //首先在created里面打印一下id是传过来了 this.GoodsCodeid=this.$route.query.id //然后我们重新赋值给GoodsCodeid }, mounted() {
//发送axios get请求
this.$axios .get(api.sea_result, { //api.sea_result是我的请求url params: { //携带的参数 GoodsCodeid:this.GoodsCodeid }, }) .then((res) => { this.indexlist = res.data.GoodsCode; //请求成功之后把数据赋值给indexlist this.indexlist.forEach(item=>{ //这里进行foreach循环数组里的每一项
//接着判断当前数组里的id和我们点击传过来id是不是一样 if(item.id === this.GoodsCodeid){ this.indexlist = item //把id是一样重新赋值 } }) console.log(this.indexlist, 333); //打印一下就是我们需要id相等的那条数据了 }) .catch((error) => { console.log(error); }); },
注意：这里是模拟数据 真实开发可能不需要我们来比较id是不是一样 我门只需要发送请求的时候传入参数id给后台 后台就会返回对应id的数据给我们
