一、搜索功能的思路
在搜索框中输入商品名或商品名所包含的字符，就可以搜索出相关的商品列表
Image 146.png
二、完成搜索功能的步骤
搜索结果存在的两种情况
- 1、搜到结果，页面跳转到结果界面
- 2、没有结果，那页面就不应该跳转
步骤
api.js
Image 147.png
mock.js
Image 149.png
product.vue
根据返回的code判断是否跳转路由
Image 150.png
productlist.vue
Image 151.png
效果：
GIF4.gif
功能基本实现了
总结
其实这个搜索功能有两种写法
第一种：上面的写法：将搜索框写在product.vue里面
缺点：
1、使用了2次axios请求，很繁琐。
2、在productlist.vue里面的mounted（）需要进行判断是进行查询请求还是分类商品生成，逻辑变得更复杂了。
3、不能在路由跳转之后清空搜索框，在路由跳转之前清空的话，又会导致在列表页面失去查询参数，不能正确查询......
优点：没有发现
第二种：直接将搜索框写在productlist.vue里面
优点：上面缺点全没了
缺点：暂时没发现
