vue vue-router vuex element-ui axios的学习笔记（十四）商品详情页

思路

1、写api

Image 152.png

2、写详情页组件和路由

router---->index.js

Image 153.png

productcontent.vue

Image 154.png

3、在productlist.vue把路由加上

Image 155.png

4、mock.js

Image 156.png

5、详情页添加内容

<template>
  <div>
    <h1>productcontent.vue</h1>
    <p>{{$route.params.class}}</p>
    <p>{{$route.params.productname}}</p>
    <div>
      <h2 v-text="product.productname"></h2>
      <p>价格：{{product.productprice}}元</p>
      <p>销量：{{product.productsells}}</p>
      <img :src="product.productimage">
      <p>{{product.productintro}}</p>
    </div>
  </div>
</template>
<script>
import {GetProduct} from '../../../api/api'
export default {
  data () {
    return {
      product: {}
    }
  },
  mounted () {
    let params = {
      productname: this.$route.params.productname,
      productclass: this.$route.params.class
    }
    GetProduct(params).then(res => {
      console.log(res)
      this.product = res.data.curproduct
    })
  }
}
</script>

效果

GIF5.gif

总结：商品页面的功能基本完成了，接下来就是把样式写好