尚品汇项目在进行路由跳转时传参失败

   在尝试编程式路由导航结合事件委派进行路由跳转时，在传递query参数时，发现有一部分未传过去，通过打印输出调试发现自己忽略了一个简单问题，就是在给标签添加自定义属性时采用的是驼峰命名法，但是浏览器会将其都变成小写，就不是驼峰了。

  标签代码如下：

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

  失败代码：

​
            let element=event.target;
            let {category1Id,category2Id,category3Id,categoryname}=element.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;
               }
               location.query=query
               this.$router.push(location)
             }

​

  打印调试过程中，发现不论点击什么，3个categoryId都为unfefined

  于是我对element.dataset进行了输出，发现3个categoryId的命名都变成了小写

 因此，我将解构赋值过程中的categoryId都变成小写，结果成功将query传递过去

成功代码

​
            let element=event.target;
            let {category1id,category2id,category3id,categoryname}=element.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;
               }
               location.query=query
               this.$router.push(location)
            }

​

成功将需要的参数携带过去。