绘制商品列表结构

1. 新建GoodsList.vue组件制作商品列表
2. 商品列表的布局
   
3. 商品的图片，名称，价格，以及库存

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

4. 设置商品列表的样式使用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>

5. 在手机中调试项目
   • 手机和电脑处于同一个局域网
   • 在package.son文件中，在dev 脚本中添加一个--host指令，把当前电脑的IP地址设置为—host的指令值

商品详情页面

1. 新建GoodsInfo.vue组件，引入组件，设置匹配规则

import GoodsInfo from './components/goods/GoodsInfo.vue'

{path:'/home/goodsinfo/:id',component:GoodsInfo}

2. 网页中的两种跳转方式
   • 使用a标签的形式进行跳转（router-link也属于a标签）
   • 使用window.location.href的形式，叫做编程式导航
3. 使用JS的形式进行路由导航，使用router.push方法跳转页面
4. this.router的区分
   • this.$route是路由的参数对象，所有路由中的参数都属于它
   • this.$router是一个路由导航对象，用它可以使用js代码实现路由的跳转，绑定click

goDetail(id){
    $router.push('/home/goodsinfo/'+id)