目录
因为静态组件已经是写好的，所以直接将给的资源中复制替换页面的静态组件即可。
该页面一共被分为一下几个部分
1、面包屑（带小x号的部分）
2、searchSelacter子组件
3、详情部分，就是综合到价格部分
4、good-List商品展示，展示的所有商品
5、分页器
准备API,这里api是post,且需要带参数，至少是一个空对象
在search仓库中进行三连环
1、getter中函数的第一个形参可以拿到当前小仓库的state。
2、通过mapGetters获取数据的时候因为getter并没有分开，所以在计算属性中就不需要写成对象的形式，而是直接结构赋值即可。
3、为了防止没网的时候，所以至少要返回一个空数组
因为参数不同，返回的结果不同，所以我们要根据参数发多次请求获取参数。所以我们将发送请求封装成一个方法，所以之前组件挂载直接调用函数getData()即可。
以后会根据不同的情况改变数据内容，从而返回不同的内容
要在发送请求之前整理好数据，所以我们可以在beforeMounted中整理参数
Object.assign(a,b,c)b和c会将a相同属性名的替换属性值替换掉
三、渲染组件内容因为数据已经获取存放在仓库中了，且通过getters简化过了，所以直接获取到组件，然后根据v-for进行遍历就可以了。
注意!每次发完请求都要清空一二三级目录ID，因为第二次可能只选择了一或二级ID，这就导致了三级目录ID没有被重置，所以每次发完请求我们都要重置ID.
关键字不用重置是因为关键是双向绑定，每次输入都会被重置，且只有一个值
面包屑是否显示应该是判断是否有catergoryName,所以我们通过v-show来进行控制。同时点击x号，时候应该让categoryName置空。
在重新发送请求的时候我们发现路由地址并没有发生变化，所以我们通过路由跳转自己进行解决，同时我们发现params参数也一并没有了，我们的本意是先只是清楚query参数，所以跳转的时候进行判断，如果有params要一起带上。
老师添加了一个判断是否有params参数的判断条件，我觉得没有必要，因为如果params参数没有，那么路由就重置不了，所以我们就不设置判断条件了。
1、同样的方法判断关键字是否存在，然后重新发送请求即可。
2、清除文本框【但是这里有一个问题就是发送完请求之后我们需要将搜索框里面的内容置空，这里涉及到了兄弟间通信，这里使用全局事件总线。】
注册全局事件总线
使用全局事件总线
这里也需要带上query的参数不能丢，所以在触发全局事件的后面加上
this.$router.push({name:"search",query:this.$route.query})
1、在子组件中触发函数，需要将当前品牌给父组件，在父组件中重新整理数据，然后向服务器获取数据，这里涉及了到父子组件同行，所以我们使自定义事件来时实现。
这里提前在父组件准备好自定事件回调
将自定义事件传递给子组件，并且点击品牌触发事件回调，传递回来需要的数据
点击品牌上面的小x号，也是可以清楚数据和发送请求的，和上面一样的操作
对应的方法
给售卖属性绑定点击事件，和上面一样，也是父子组件传值，也是绑定自定义事件
同时在父组件中设置自定义事件回调，
对应回调
同样要给x设置删除的点击事件，但是这里的事件在触发的时候需要传递当前的index值，否则我们就不知道该删除谁了。且这里有可能属性点击了多个属性值，所以这里应该用v-for,
对应回调
排序操作：1: 综合,2: 价格 asc: 升序,desc: 降序
示例: "1:desc"，总共可能出现四种情况。1升序降序，2升序降序。
通过判断searchParams中的order参数中是1还是2，如果是1，则是综合有类名，如果是2则是价格有类名。
谁有箭头，判断条件和上面的谁有类名是一样的，但是这里的箭头我们使用阿里巴巴矢量图来制作。
阿里巴巴矢量图的使用
第一步选择好需要的矢量图，加入购物车。
第二步点击在线链接，在public文件夹的静态页面中引引入css样式
注意！给的链接中没有https:需要自己添加上去
第三 在需要使用箭头的标签上写上两个类名，class:'iconfont' class="复制上面需要的样式进行选择"
选择上或者下则和上面判断类名相似，这里是通过判断searchParams中是含有desc还是asc来进行判断的。
前面的类名、图标是上是下都是基于searchParams中的数据进行判断的，所以这里用于点击，让数据进行变化就即为重要了。
业务分析：默认综合降序
用户点击综合：由价格变为综合，或者是又原来的降序变为升序
用户点击价格：由综合变为价格，再次点击降序变升序
鉴于第一次使用老师说的自己写分页器，我们发现其中的代码会报错，且无法运行，这一次我使用element Ui解决这个问题
1、安装elemnet Ui:
npm i element-ui -S2、我们这里采用按需引入
需要在babel.config.js中配置如下代码
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]还需要安装：
npm install babel-plugin-component -D3、引入样式和组件并且使用
4、在search组件中复制对应的css样式和配置对应的函数
配置对应的函数
