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裏面 優勢：上面缺點全沒了 缺點：暫時沒發現