SHP项目学习之三级联动组件的路由跳转与传递参数

三级联动用户可以点击的：一级分类、二级分类、三级分类，当点击的时候，Home模块跳转到Search模块，一级会把用户选中的产品名字和ID在路由跳转的时候进行传递。

路由跳转

声明式导航：router-link

编程式导航：push|replace

(1)找到三级分类相应的a标签，在TypeNav/index.vue中

a放的是一级或二级三级分类的名字，点击名字后进行跳转，

声明式导航，把A换成router-link

但是需要注意，会出现卡顿现象

router-link：是一个组件，当服务器数据返回时，循环出现很多的router-link【创建组件实例的】，一瞬间会创建1K+，因此出现了卡顿现象

（2）因此只能用编程式导航，添加单击事件

a @click="goSearch"

然后在script中的methods中声明路由跳转方法

但仍不够好，最好的方法是

（3）给父元素加一个单击事件，编程式导航+事件委派

但存在一些问题：事件委派是把全部的子节点【h3,dt,dl,em]的事件委派给父节点

点击a标签的时候，才会进行路由的跳转，【怎么才能确定点击的一定是a标签】

解决一个问题，把子节点当中的a标签，加上自定义属性data-categoryName,其余节点是没有的

 在父标签all-sort-list2中添加单击事件

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

 <!-- data-categoryName区别是a标签;使用data-categoty1ID自定义属性进行区别123级标签 -->

 <h3 @mouseenter="changeIndex(index)">
   <!-- 进行声明式路由跳转 -->
   <!-- 使用data-categoty1ID自定义属性进行区别123级标签 -->
   <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{
   c1.categoryName  }}</a>

     并在script中进行修改

goSearch(event) {
            // this.$router.push('/search');
            // 最好的解决办法是用编程式导航+事件委派
            // 但存在一些问题：事件委派是把全部的子节点【h3,dt,dl,em]的事件委派给父节点
            // 点击a标签的时候，才会进行路由的跳转，【怎么才能确定点击的一定是a标签】
            // 解决一个问题，把子节点当中的a标签，加上自定义属性data-categoryName,其余节点是没有的
            let element = event.target;
            //获取到当前出发这个事件的节点【h3,a,dt,dl】，需要带有data-categoryname这样的节点才是a标签，节点有一个属性dataset属性，可以获取节点的自定义属性和属性值

            //  console.log(element)
            // console.log(element.dataset);
            //如果标签身上拥有categoryName一定是a标签
            let { categoryname, category1id, category2id, category3id } = element.dataset;
            if (categoryname) {
                //整理路由跳转的参数
                let location = { name: 'search' };
                let query = { categoryName: categoryname };
                //123级分类的a标签
                if (category1id) {
                    query.category1Id = category1id;
                } else if (category2id) {
                    query.category2Id = category2id;
                } else {
                    query.category3Id = category3id;
                }
                //整理完参数
                // console.log(location,query);
                location.query = query;
                //路由跳转
                this.$router.push(location);

            }
        }

利用第三种方法可以成功跳转，并传参。