1 以用JS将三级联动添加动态背景颜色

思路：利用index，向设置data里面一个currentIndex为-1，然后写两个方法，当鼠标移到某个目录时，currentIndex就变为当前的index值，离开则为-1。在目标的标签中绑定class，当currentIndex和index相同时，则有背景颜色。

2 防抖、节流

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。（在时间范围内不管点击多少次只执行一次）

简而言之
防抖：用户操作频繁，但只执行一次
节流：用户操作频繁，但把频繁的操作变为少量操作（给浏览器充裕的时间解析代码）

lodash插件：封装函数的防抖与节流的业务【闭包+延时器】 module包中有，所以之间引入

//引入全部功能函数
import _ from "lodash";
// 最好按需加载
import throttle from "lodash/throttle";

 //节流
    changeIndex: throttle(function (index) {
      this.currentIndex = index;
    }, 50),

3 三级联动路由跳转与传递参数（事件委派+编程式导航）

//gosearch
 <div class="all-sort-list2" @click="goSearch">
            <div
              class="item"
              v-for="(c1, index) in categoryList"
              :key="c1.categoryID"
              :class="{ cur: currentIndex == index }"
            >
              <h3 @mouseenter="changeIndex(index)">
                <!-- <router-link to="/search">{{ c1.categoryName }} </router-link> -->
//data-categoryName，data-category1Id，在使用时没有data-，且全部为小写
                <a
                  :data-categoryName="c1.categoryName"
                  :data-category1Id="c1.categoryId"
                  >{{ c1.categoryName }}</a
                >
              </h3>
              <!-- 二三级 -->
              <div class="item-list clearfix">
                <div
                  class="subitem"
                  v-for="c2 in c1.categoryChild"
                  :key="c2.categoryID"
                >
                  <dl class="fore">
                    <dt>
                      <!-- <router-link to="/search"
                        >{{ c2.categoryName }}
                      </router-link> -->
                      <a
                        :data-categoryName="c2.categoryName"
                        :data-category2Id="c2.categoryId"
                        >{{ c2.categoryName }}</a
                      >
                    </dt>
                    <dd>
                      <em v-for="c3 in c2.categoryChild" :key="c3.categoryID">
                        <!-- <router-link to="/search"
                          >{{ c3.categoryName }}
                        </router-link> -->

                        <a
                          :data-categoryName="c2.categoryName"
                          :data-category3Id="c3.categoryId"
                          >{{ c3.categoryName }}</a
                        >
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

 goSearch() {
      // 点击如何确定点的是a标签
      // 加上自定义属性data-categoryName，其余节点没有
      // 带有data-categoryName的一定是a
      let element = event.target;
      // 节点有一个dataset属性，能够获取自定义属性与属性值
      let { categoryname, category1id, category2id, category3id } =element.dataset;
      // 如果有categoryName一定是a标签
      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;
        }
        location.query = query;
        // 路由跳转
        // console.log(location);
        this.$router.push(location);
      }
    },
  },