事件委派+自定义属性+编程式导航实现路由跳转及传参

当我们页面中有许多a标签需要实现点击跳转到同一个页面并携带不同的参数时，我们就可以使用事件委派+自定义属性+编程式导航 的方式，用最小的内存实现路由跳转的最大效率。

为什么我们不用router-link 进行跳转？

要知道，我们页面中的每一个router-link 都是Vue通过new一个组件给我们创建出来的，当我们页面中有几百个router-link 标签时，对于浏览器的内存压力是非常大的，会造成卡顿。

一、事件委派

事件委派就是将多个元素共有的事件放到他们共同的父元素身上。

比如下面：

我们有一个三级菜单的效果（具体的结构不需要知道，只需要知道点击a标签实现路由跳转即可）

每一级的菜单都有若干个a标签，点击这些标签就会跳转到共同的页面，参数是点击的标签名和对应的id。

其实这样我们有多少个a标签就会有多少个回调函数，还是挺占内存的。

所以，我们把这个点击路由跳转的事件绑定到他们共同的父元素上就能只用一个回调函数并且给所有的元素添加点击路由跳转事件。

 我们把事件提升到父元素的操作就叫做事件委派。

二、自定义属性

我们在上面使用了事件委派后，改标签下的所有元素都拥有了该事件，那我们接下来要做的就是判断我们点的到底是不是a标签，只有我们点击了a标签才会实现路由跳转，点击h3，dt，div啥的都不会跳转。

我们可以使用自定义属性来标识该标签是否为a标签。

:data-属性名 = "属性值"

 我们给每一级菜单都加上一个categoryName和categoryId属性，

其值为就是我们要传参的菜单名和该标签的id号。

categoryName属性用来判断点击对象是否为a标签和传参，categoryId用来传参。

三、编程式导航

我们既然已经定义了自定义属性，那我们要拿到自定义属性进行判断：

event.target.dataset.属性

注意：我们在自定义属性的时候用的是驼峰命名法，而转化为真实DOM后，全部都变成了小写字母，并且我们获取属性的属性不需要加上data- 

 我们就可以根据是否存在categoryName判断是否点击的是a标签，如果是，将categoryName和categoryId属性作为参数传递过去。

// 点击三级联动菜单跳转到search，并携带参数：名称和ID
    goSearch(event) {
      let dataset = event.target.dataset;
      // 如果点击的是目标元素，就发送请求
      if (dataset.categoryname) {
        this.$router.push({
          name: "search",
          query: {
            categoryName: dataset.categoryname,
            categoryId: dataset.categoryid
          }
        })
      }
    },