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

思路

1、写api

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

2、写详情页组件和路由

router—->index.js

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

productcontent.vue

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

3、在productlist.vue把路由加上

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

4、mock.js

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

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>

效果

《vue vue-router vuex element-ui axios的学习笔记(十四)商品详情页》

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

    原文作者:思吾谓何思
    原文地址: https://segmentfault.com/a/1190000013032594
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞