前端项目-03-三级联动和路由跳转和传参

目录

1-二三级联动的显示和隐藏（JS控制）

2-卡顿现象

3-三级联动路由跳转

---

1-二三级联动的显示和隐藏（JS控制）

目前系统的二三级分类是通过样式来实现的。原始代码：

 

 

我们现在需要通过JS来控制显示和隐藏：给div添加一个动态样式；

:style="{display:currentIdx==index?'block':'none'}">
 

 

2-卡顿现象

       如果用户操作过快，每一次的操作都会调用函数（函数内部可能有计算等等其他逻辑）会导致浏览器解析不过来，出现所谓的卡顿现象...
所以在项目中药进行节流和防抖处理....

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

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

已经有封装好的组件

Lodash 简介 | Lodash 中文文档 | Lodash 中文网
 

 

 

用户滑动三级分类过快，这里添加了lodash节流函数throttle函数

 

 

ps：throttle的回调函数这里不能使用箭头函数，可能会出现上下文this问题

3-三级联动路由跳转
 

用户点击一级，二级，三级分类，会从home跳转到search模块，会把对应的分类id和分类名称传递过去...

 

点击一级分类，传递一级分类id和一级分类名称；
点击二级分类，传递二级分类id和二级分类名称；
点击二级分类，传递三级分类id和三级分类名称；

声明式导航使用router-link ，由于router-link是一个组件，当鼠标移动过快的时候，因为是组件而且是循环（组件需要创建实例等等，很耗时间和内存的），所以出现了卡顿现象...因此我们这里采用编程式导航...

最好的解决方式:编程式导航+事件委派

利用事件委派存在以下问题：

问题1-事件委派：是把全部子节点【比如h3,dt,dl,dm】的事件委派给父节点，我们的需求的点击a标签才跳转，如何确定点击的是a标签呢？
问题1的解决方式，利用自定义属性，给a标签自定义属性，其他标签肯定没有这个属性；比如定义data-categoryName

问题2-即使您能确定是a标签，如何确定和区分是一级分类，二级分类，三级分类的a标签呢？
问题2的解决方式，再给a标签自定义一个属性data-category1Id；

注意：自定义属性后通过event.target.dataset可以拿到自定义属性和属性值，但是我们定义data-categoryName是这样，拿到的值是categoryname（浏览器自动帮我们转小写了）