Vue项目--路由跳转的分析

 路由跳转可以选择声明式导航或编程式导航。由于本项目的三级联动的所有a标签都能点击，所以如果采用声明式（router-link）会一下创建上千个router-link（router-link本身是vue的实例化对象vue-component），很耗内存，导致卡顿。所以最后选择编程式导航，给父标签添加点击事件。

最后用事件的委派和编程式导航。

事件委派将@click事件绑定给所有元素的父标签--即左侧导航栏的最外层div，但是事件委派存在两个问题：1.只有点击父div中的a标签才跳转，怎么确定点击的是a标签呢？2.a标签分为一二三级category，怎么确定点击的是哪一级，从而在跳转时给query不同的参数名呢？

采用的解决办法是：给a标签绑定两个自定义属性：data-categoryName和data-category1Id / data-category2Id / data-category3Id 第一个用来确定是否是a标签，并获取到对应的categoryName，第二个用来确定是几级分类，并获取categoryId。

注意：绑定自定义属性的方法：data-(驼峰式命名的自定义属性名)

        获取自定义属性的方法element.dataset (这里获取的自定义属性名是浏览器自动将驼峰式都转化为小写了)

给最外层父组件绑定点击事件：

<div class="all-sort-list2" @click.stop="goSearch">

添加自定义属性：

<a
  :data-categoryName="c1.categoryName"
  :data-category1Id="c1.categoryId"
>
</a>

路由跳转实现：

goSearch(event) {
      let target = event.target;
      let { categoryname, category1id, category2id, category3id } =
        target.dataset; //dataset能获取到结点的自定义属性和值，直接将其解构出来
        //注意原本的驼峰式命名要全部改成小写!!!
      if (categoryname) {
        let query = { categoryName:categoryname };//query的编辑
        if (category1id) {
          query["category1Id"] = category1id;
        } else if (category2id) {
          query["category2Id"] = category2id;
        } else if (category3id) {
          query["category3Id"] = category3id;
        }
        this.$router.push({//路由跳转
          name: "search",
          query,
        });
      }
    },