name query 路由传参路径不显示参数

vue 遇到的问题:router已经配置了name 使用query传递参数 但是路径不显示参数

这是代码

 <!-- 路由跳转 -->
     <div class="all-sort-list2" @click="goSearch">
         <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId">
  <!-- 一级菜单 -->
         	<h3 @mouseenter="changeIndex(index)" :class="{current:currentIndex==index}" >
             <a href="#" :data-categoryName="c1.categoryName" :data-type1="c1.categoryId">{{c1.categoryName}}</a>
            </h3>
  <!-- 二级、三级菜单 -->
         <div class="item-list clearfix" :style="{dispaly:currentIndex==index?'block':'none'}">
              <div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                    <dl class="fore">
                         <dt>
                           	<a  href="#" :data-categoryName="c2.categoryName" :data-type2="c2.categoryId">{{c2.categoryName}}</a>
                           </dt>
                    <dd >
                           <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                            	<a href="#" :data-categoryName="c3.categoryName" :data-type3="c3.categoryId">{{c3.categoryName}}</a>
                            </em>
                    </dd>   
                    </dl>
  	      </div>
    </div>
                           

这是js代码

goSearch(event) {
            //1-给每一级的a标签添加data-categoryname属性
            let ele = event.target;
            //获取当前触发的事件的节点,需要带有data-categoryname这样的节点,可以确定一定是 a标签
            let { categoryname, type1, type2, type3 } = ele.dataset;
            //注:如果a标签里面带有href="" 不会显示传递的参数
            if (categoryname) {
                //区分1 2 3 级标签
                let location = {
                    name: 'search'
                };
                let query = {
                    categoryName: categoryname
                }
                // 添加data-type(1 2 3 )来区分

                if (type1) {
                    query.type1 = type1
                } else if (type2) {
                    query.type2 = type2
                } else {
                    query.type3 = type3
                }
                //将路由参数合并 query参数
                location.query = query;
                //路由跳转categoryName,type合并到location里
                console.log(query);
                this.$router.push(location);
                // console.log(location);
            }
        }

这是控制台打印的参数 但是我的路径依旧是 http://localhost:8080/#/
在这里插入图片描述
后面检查半天也不懂是为什么,最后才发现是a 标签那里 写了 href=“#” ,删除之后就可以了

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值