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

一、实现思路

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

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

方法二、