Vue中利用事件委派+编程式导航获取三级联动相应级数的数据并进行路由跳转

利用事件委派+编程式导航实现路由的跳转与传递参数

一;确认用户点击的是三级联动的哪一级以及这一级的点击内容思路:

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>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值