vue vue-router vuex element-ui axios的学习笔记（十三）完成搜索功能

一、搜索功能的思路

在搜索框中输入商品名或商品名所包含的字符，就可以搜索出相关的商品列表

二、完成搜索功能的步骤

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里面
优点：上面缺点全没了
缺点：暂时没发现