美文网首页
vue vue-router vuex element-ui a

vue vue-router vuex element-ui a

作者: 思吾谓何思 | 来源:发表于2017-11-20 20:42 被阅读0次

    思路

    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

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

    相关文章

      网友评论

          本文标题:vue vue-router vuex element-ui a

          本文链接:https://www.haomeiwen.com/subject/kjhbvxtx.html