购物商城实现点击商品列表某商品,进入其详情页!
一、实现思路
1.如何实现列表页面商品点击进入详情页面。
首先我们需要把这个商品的id带给他。
methods: {
gotolink(id) {
this.$router.push({
path: '/Detailed/',
query: {
id: Number.prototype.toString.call(id)
}
});
}
}
在商品详情页拼接一下
created() {
let _that = this;
this.productId = this.$route.query.id;
API.post('http://10.70.39.180:9000/app/product/productDetail/' + this.productId).then(res => {
// console.log(res);
_that.detailData = res.data;
console.log('detailData', this.detailData);
});
},
这样点击该商品就能进入到对应的商品的详情。
二、用到的方法讲解
1.Number.prototype.toString.call(id)
2.this.$route.query.id
使用该方法的时候传参数:
传参数:这是我们在商品List页面做的事情,
this.$router.push({
path: '/trading',
query:{
id:id,
}
})
获取参数:这是我们在Detailed详情页面做的事情。
this.$route.query.id
url表现形式:
http://localhost:8090/#/trading?id=1
页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在
3.this.$route.params.id
使用该方法的时候传参数
this.$router.push({
name: 'trading',
params:{
id:id,
}
})
使用该方法的时候获取参数
this.$route.params.id
url的表现形式(url中不带参数)
http://localhost:8090/#/trading
页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在
方法二、
CSDN-Ada助手: 不知道 Vue入门 技能树是否可以帮到你:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
m0_59201654: 这个id怎么获取啊
yinngliu: 哈哈哈哈哈哈哈
Cdf(人名): 好文章,学习了