尚硅谷尚品项目汇笔记（三）

                ​​​​​​​        ​​​​​​​        

(1)完成一级分类动态添加背景颜色

第一种解决方案：采用样式完成（可以的）

.item:hover{

  background:skyblue;

}

第二种解决方案：通过Js完成

 

（2）通过JS控制二三级商品分类的显示与隐藏

 最开始的时候，是通过css样式display: block|none 显示与隐藏二三级商品分类

 (3)演示卡顿现象

 正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果事件很短，而回调函数内部有计算，那么可能出现浏览器卡顿）

 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，吧频繁触发变为少量触发

 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间后才会触发，只会执行一次

 //lodash插件：里面封装函数的防抖与节流的业务【闭包+延时器】

 npm i --save lodash

 (6)三级联动组件的路由跳转与传递参数

三级联动用户可以点击的：一级分类、二级分类、三级分类，当你点击的时候

Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字、产品的ID），再路由跳转的时候进行传递

路由跳转：

声明式导航：router-link

编程式导航：push|replace

三级联动：如果使用声明式导航router-link,可以实现路由的跳转与传递参数

但需要注意的，会出现卡顿现象。

router-link: 可是一个组件啊，当服务器的数据返回之后，循环出很多的router-link组件【创建组件实例的循环】 中间过程还要把虚拟dom转换为真实dom

再创建组件实例的时候，一瞬间创建很多组件实例，很耗内存，因此出现了卡顿现象。

 

7.完成三级联动路由跳转与传递参数

this.$router.push({name:"search",query:{categoryName:'xxx',2id:'xxx'}})