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

1、搜索功能的思路

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

2、完成搜索功能的步骤

一、搜索结果存在的两种状况

• 一、搜到结果，页面跳转到结果界面
• 二、没有结果，那页面就不该该跳转

二、步骤

api.js

mock.js

product.vue

根据返回的code判断是否跳转路由

productlist.vue

效果：

功能基本实现了

总结

其实这个搜索功能有两种写法

第一种：上面的写法：将搜索框写在product.vue里面
缺点：
一、使用了2次axios请求，很繁琐。
二、在productlist.vue里面的mounted（）须要进行判断是进行查询请求仍是分类商品生成，逻辑变得更复杂了。
三、不能在路由跳转以后清空搜索框，在路由跳转以前清空的话，又会致使在列表页面失去查询参数，不能正确查询......
优势：没有发现

第二种：直接将搜索框写在productlist.vue里面 优势：上面缺点全没了 缺点：暂时没发现