ant design vue 实现带参跳转页面
点击A页面时,跳转到B页面,并在地址中传递参数
·
功能描述
点击A页面时,跳转到B页面,并在地址中传递参数。
实现思路
A页面中添加@Click事件,进行跳转,我是多个按钮同时调用一个方法,使用传递参数的方式进行区分。
代码实现
A页面代码
在你需要跳转的地方添加@Click事件,传递参数区分哪里进行调用的。
<a-col :md="6" @click="PageJump(3)">
<div class="content">
<div class="title">按钮</div>
<img class="img" src='../../assets/jiandang.png'>
</div>
</a-col>
<a-col :md="6" @click="PageJump(0)">
<div class="content">
<div class="title">按钮</div>
<img src='../../assets/gaoxueya.png'>
</div>
</a-col>
JS代码
PageJump(sid) {
this.$router.push({
path: '/xxxx/xxxx?type='+sid,
})
},
B页面
activated
每次进入到B页面是都会走这个方法,这是他和created()方法的区别,我这边是获取到参数后直接赋值给了查询对象queryParam,然后调用查询方法,请求后台,返回数据。
activated() {
console.log('接收到的参数', this.$route.query.type)
//获取路径中的参数
this.queryParam.threeTag=this.$route.query.type;
this.loadData()
},
结束语
这就是整个的实现带参调转页面,不懂得可以私信!!!
更多推荐
已为社区贡献6条内容
所有评论(0)