商品列表

绘制商品列表结构

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

    
    
小米（mi）小米Note 16G双网通版
    

        

            ￥2199
            ￥2399
        
        

            热卖中
            剩余60件
        
    

4. 设置商品列表的样式使用flex布局使两个商品并排，向两边对齐，设置边距，商品价格库存的背景，并将它和商品图片名称以flex布局的方式改变flex的默认值，使它们分别向上下对齐

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)