思路
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
