绘制商品列表结构
- 新建GoodsList.vue组件制作商品列表
- 商品列表的布局
- 商品的图片，名称，价格，以及库存
<div class="goods-item">
<img src="../../images/小米.jpg" />
<h1 class="title">小米（mi）小米Note 16G双网通版</h1>
<div class="info">
<p class="price">
<span class="now">￥2199</span>
<span class="old">￥2399</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩余60件</span>
</p>
</div>
</div>
- 设置商品列表的样式使用flex布局使两个商品并排，向两边对齐，设置边距，商品价格库存的背景，并将它和商品图片名称以flex布局的方式改变flex的默认值，使它们分别向上下对齐
<style scoped>
.goods-list{
display: flex;
flex-wrap: wrap;
padding: 7px;
justify-content: space-between;
}
.goods-item{
width: 49%;
border: 1px solid #cccccc;
box-shadow: 0 0 8px #cccccc;
margin: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.goods-item>img{
width: 100%;
height: 600px;
}
.title{
font-size: 14px;
}
.info{
background-color: #eee;
}
.info>p{
margin: 0px;
padding: 5px;
}
.now{
color: red;
font-weight: bold;
font-size: 16px;
}
.old{
text-decoration: line-through;
font-size: 12px;
margin-left: 10px;
}
.sell{
display: flex;
justify-content: space-between;
font-size: 13px;
}
</style>
- 在手机中调试项目
- 手机和电脑处于同一个局域网
- 在package.son文件中，在dev 脚本中添加一个--host指令，把当前电脑的IP地址设置为—host的指令值
商品详情页面
- 新建GoodsInfo.vue组件，引入组件，设置匹配规则
import GoodsInfo from './components/goods/GoodsInfo.vue'
{path:'/home/goodsinfo/:id',component:GoodsInfo}
- 网页中的两种跳转方式
- 使用a标签的形式进行跳转（router-link也属于a标签）
- 使用window.location.href的形式，叫做编程式导航
- 使用JS的形式进行路由导航，使用router.push方法跳转页面
- this.
router的区分
- this.$route是路由的参数对象，所有路由中的参数都属于它
- this.$router是一个路由导航对象，用它可以使用js代码实现路由的跳转，绑定click
goDetail(id){
$router.push('/home/goodsinfo/'+id)
