在写三级联动时遇到的问题以及解决

1路由跳转问题 以及传参问题
利用相应的生命式路由(router-link) 会出现卡顿的现象 它是一个组件 页面一进入 会加载很多组件 会影响性能
改用编程式路由
解决方式 ： 编程式路由 + 事件委派
利用事件委派存在一些问题 1：点击一定是a标签 2 如何获取参数[1,2,3,级分类的产品的名字 id]
把子节点当中a标签 加上那个自定义属性data-categoryName 其余是没有的
html结构

 <div class="sort">
                    <div class="all-sort-list2" @click="goSearch">
                        <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId" :class="{cur:actionIndex==index}">
                            <h3 @mouseenter="changeIndex(index)" @mouseleave="leaveIndex()">
                                <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryName">{{c1.categoryName}}</a>
                                <!-- <router-link to="/search">{{c1.categoryName}}</router-link> -->
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                                    <dl class="fore">
                                        <dt>
                                            <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryName">{{c2.categoryName}}</a>
                                              <!-- <router-link to="/search">{{c2.categoryName}}</router-link> -->
                                        </dt>
                                        <dd>
                                            <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                                                <a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryName">{{c3.categoryName}}</a>
                                                  <!-- <router-link to="/search">{{c3.categoryName}}</router-link> -->
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

相应的解决方法

methods:{
      //鼠标进入修改响应式数据  actionIndex属性
      //  changeIndex(index){
      //      //index 鼠标移入某个一个标题上的下标
      //   //    console.log(index);
      //   this.actionIndex = index
      //  },
      //节流写法 throttle回调函数别用箭头函数
      changeIndex:_.throttle(function(index){
        this.actionIndex = index

      },50),
       //一级分类鼠标移除的事件回调 移除后类名消失
       leaveIndex(){
           this.actionIndex = -1
       },
       //进行路由跳转的方法
       goSearch(){
         this.$router.push('/search')
        //解决方式 ： 编程式路由 + 事件委派
        //利用事件委派存在一些问题 1：点击一定是a标签 2 如何获取参数[1,2,3,级分类的产品的名字 id]
        //把子节点当中a标签 加上那个自定义属性data-categoryName 其余是没有的
        let element = event.target;
        //节点有一个属性dataset 可以获取自定义属性与属性值
        let {categoryname,category1id,category2id,category3id,} = element.dataset;
        if(categoryname){
          let location = {name:'search'};
          let query = {categoryName:categoryname}
          // alert(123)
          //一级分类 二级分类 的a标签
          if(category1id){
                 query.category1Id = category1id 
          }else if(category2id){
                 query.category2Id = category2id 
          }else{
                  query.category3Id = category3id 
          }
          //整理完参数 路由跳转
          location.query = query;
          //路由跳转
          this.$router.push(location)

        }

       }
  }

节流问题的出现
编程式路由会出现频繁触发事件 利用相应的节流方法可以解决
引入lodash

import _ from 'lodash';

原先获取标题下标的方法

 changeIndex(index){
      //      //index 鼠标移入某个一个标题上的下标
      //   //    console.log(index);
        this.actionIndex = index
        },

节流方法

 changeIndex:_.throttle(function(index){
        this.actionIndex = index

      },50),

节流与防抖的总结

//防抖 用户操作很频繁 但是只执行一次
//节流 用户操作很频繁 但是吧频繁的操作变成为少量的操作【可以给浏览器充裕的时间解析代码】