繪製商品列表結構

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)