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/#/
name query 路由传参路径不显示参数_第1张图片
后面检查半天也不懂是为什么,最后才发现是a 标签那里 写了 href=“#” ,删除之后就可以了

你可能感兴趣的:(web前端,vue)