22、商品列表页

前言：本章主要是商品列表页的一个基本布局讲解。（具体效果请下滑到底部） Github：https://github.com/Ewall1106/mall（请选择分支chapter22）

1、新建goodList.vue页面

（1）新建文件 > 然后编写vue页面的一个基本结构

新建goodList.vue

（2）然后我们就去router中注册goodList路由

router路由.png

2、编写商品列表页

（1）头部标题

• 头部跟classify.vue页面的头部栏大同小异，所以你也可以抽离成一个组件；其次，对于title名的话应该是由路传参带过来的、是动态的，所以我们用模板语法包起来。

获取上级页面传过来的路由参数

• ok，现在我们回过头返回到classify.vue分类页面添加路由跳转函数并在参数中携带title名

classify.vue中添加点击事件

click事件

• 这样，我们从上一级点击进来的名字就赋到商品列表的title了：

头部标题

对这部分路由传参还不熟的可参考v-router之什么是编程式路由

（2）筛选工具栏

筛选工具栏

（3）商品列表

对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

• components文件夹下新建goodItem.vue组件

新建goodItem.vue组件

• 引入组件并完善商品列表页面样式，这就是我们商品列表页的一个基本呈现：

基本效果

3、小结

主要是一个html+css的基本布局，下一章渲染下把mock数据到页面，然后着重讲下父子组件之间的传值。