利用事件委派+编程式导航实现路由的跳转与传递参数
一;确认用户点击的是三级联动的哪一级以及这一级的点击内容思路:
1.事件委派:给三级联动整体的父元素绑定一个点击事件,通过该事件的event.target属性可以获取到它的子元素
对应问题:
(1)只有点击a标签时才会进行路由跳转,怎么能确定点击的是a标签?
(2)确认了点击是a标签,如何区分是一级二级还是三级的a标签
问题解决:
把子节点当中的a标签添加自定义属性 data-categoryName="xxx" 其余的子节点是没有的,到当前触发这个事件的子节点,去判断是否带有 data-categoryName 的节点。
同时给对应级别的元素标签再绑定一个自定义属性用于确认对应级别
// 这是一级
<h3 @mouseenter="changeIndex(index)" @mouseleave="leaveIndex">
<a
:data-categoryName="c1.categoryName"
:data-category1Id="c1.categoryId"
>{
{ c1.categoryName }}
</a>
</h3>