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=“#” ,删除之后就可以了