一、搜索功能的思路
在搜索框中输入商品名或商品名所包含的字符，就可以搜索出相关的商品列表
二、完成搜索功能的步骤
1、搜索结果存在的两种情况
- 1、搜到结果，页面跳转到结果界面
- 2、没有结果，那页面就不应该跳转
2、步骤
api.js
mock.js
product.vue
根据返回的code判断是否跳转路由
productlist.vue
效果：
功能基本实现了
总结
其实这个搜索功能有两种写法
第一种：上面的写法：将搜索框写在product.vue里面
缺点：
1、使用了2次axios请求，很繁琐。
2、在productlist.vue里面的mounted（）需要进行判断是进行查询请求还是分类商品生成，逻辑变得更复杂了。
3、不能在路由跳转之后清空搜索框，在路由跳转之前清空的话，又会导致在列表页面失去查询参数，不能正确查询......
优点：没有发现
第二种：直接将搜索框写在productlist.vue里面
优点：上面缺点全没了
缺点：暂时没发现
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。