三级路由跳转之利用事件委派

为什么不使用声明式导航？

由于声明式导航在动态遍历时会生成很多router-link标签，本身就是插件，如此频繁的创建组件是一件非常消耗内存的事情。

利用事件委派+编程式路由导航完成

而如果将事件委派给其祖先节点，将存在两个问题：

1.如何判断点击的是a标签

2.如何获取一二三级菜单的ID、产品名

3.如何区分a标签是哪一级的a标签

解决办法：

        利用自定义属性，假设自定义属性的名字为data-categoryName，把a标签要传递的数据存储在自定义属性中

<a :data-categoryname='c1.categoryName' :data-category1Id='c1.categoryId'>                                              {{c1.categoryName}}

</a>

这样写的目的是标记处a标签到底是哪一个a标签，等到路由跳转传参的时候，能够准确的传递参数。

祖先节点先定义点击事件@click="goSearch"

利用event.target获取点击事件的元素节点，而问题在于如何在这些节点中辨别哪一个是a标签。

dataset ——它可以获取节点的自定义属性与属性值

使用解构赋值的方式，将要传递的属性名从dataset中拿出来

  let {categoryname,category1id,category2id,category3id} =e.target.dataset

这样就可以知道点击的是哪个a了，因为每个a都有自己的id和名字，接下来就是要整合参数，发请求并进行路由跳转。

 由上图发现携带的参数有名字有id并且有属性值。并且只需要给祖先元素绑定一次事件，每个a标签路由跳转携带的参数不同