购物商城实现点击商品列表某商品 进入其详情页！

一、实现思路

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

页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在

方法二、