VUE项目--路由的跳转与传参

路由跳转有两种方式：

1. 声明式导航

	<router-link to="/home">News</router-link>

2. 编程式导航

	this.$router.push({
       name: 'xiangqing',
         params: {
             id: xxx,
             title: xxx
         }
     })

3. 第一种声明式导航: 在本项目中为什么使用router-link组件的时候，会出现卡顿？

因为项目中的的三级联动中所有的a标签都能点击，router-link是一个组件（相当于VueComponent类的实例对象），一瞬间new VueComponent很多实例（1000+），很消耗内存，因此导致卡顿。所以采用编程式导航。

4. 最好的解决方案 ？

编程式导航 + 事件委派
事件委派： 通俗的说就是将元素的事件委托给它的父级或者更外级的元素处理，它的实现机制就是DOM元素的事件冒泡。

5. 方案中存在的问题

1）事件委派将全部的子节点【h3、dt、dl、em】的事件委派给父节点，点击a标签的时候，才会进行路由跳转，但是如何确定点击的一定是 a标签 ？？
答： 给子节点中的a标签添加自定义属性data-categoryName，返回触发事件的元素; 获取到当前触发该事件的节点【h3、dt、dl、em】，带有data-categoryname的节点是 a标签
2） 确定是a标签之后，如何区分是一级、二级、三级分类的标签 ？ ？
答：给一、二、三级中的a标签分别绑定自定义属性：data-category1Id 、 data-category2Id 、 data-category3Id ，用来确定是几级分类，并获取categoryId。

6. 代码实现

最外层父组件：

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

a标签：

绑定自定义属性的方法：data- xxXxx（驼峰命名）
获取节点自定义属性与属性值的方法：element.dataset

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

跳转方法：

    goSearch(event) {
      let node = event.target;
      // 解构赋值
      let { categoryname, category1id, category2id, category3id } = node.dataset;
      if (categoryname) {
        // 整理路由跳转参数
        let location = { name: "search" };
        let query = { categoryName: categoryname };
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        // 整理完毕
        if (this.$route.params) {
          location.params = this.$route.params;
          location.query = query;
          // 路由跳转
          this.$router.push(location);
        }
      }
    },