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>
            // 二三级
                <a
                     :data-categoryName="c2.categoryName"
                     :data-category2Id="c2.categoryId"
                      >{{ c2.categoryName }}
                </a>
                <a
                        :data-categoryName="c3.categoryName"
                        :data-category3Id="c3.categoryId"
                        >{{ c3.categoryName }}
                 </a>

知识点补充：标签自定义属性：

语法格式：data-自定义属性名="xxx"

注意：

1.通过data-绑定的自定义属性 可以通过dataset属性获取自定义属性的属性值

2.自定义的属性名会被自动变为小写 如：data-categoryName 会被转为categoryname

完整实现代码（JS部分）

// goSearch是给三级联动整体的父元素绑定的事件名
goSearch(event) {
      // 最好的解决方案：事件委派+编程式路由导航
      // 问题：事件委派 是把全部的子节点{h3,dt,dl,em}的事件委派给父节点
      // 1.只有点击a标签时才会进行路由跳转，怎么能确定点击的是a标签
      // 2.确认了点击是a标签，如何区分是一级二级还是三级的a标签

      // 解决1.把子节点当中的a标签添加自定义属性 data-categoryName 其余的子节点是没有的
      let element = event.target;
      // 可以到当前触发这个事件的子节点，我们需要去寻找带有 data-categoryName 的节点
      // 通过data-绑定的自定义属性 可以通过dataset属性获取自定义属性的属性值
      // 注意 自定义的属性名会被自动变为小写
      let { categoryname, category1id, category2id, category3id } =
        element.dataset;
      // 如果标签身上拥有 categoryname 则一定是a标签
      if (categoryname) {
        // 整理路由跳转的参数
        let location = { name: "search" };
        let query = { categoryName: categoryname };
        // 确认是一级二级还是三级的a标签
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        // 汇总成一个完整参数
        location.query = query;
        console.log(location);
        // 路由跳转
        this.$router.push(location);
      }
    },