vue实现页面A传参跳转,同时页面B根据传来的参数执行搜索方法
最近项目中的需求,后台管理系统的表格中,通过判断显示不同的状态,
状态为可执行的时候点击跳转到另一页面,并且拿到
1.页面A点击查看按钮,获取所需参数并实现页面跳转,带参数。
methods: {
check(selectTable) {
this.$router.push({ path: "/member", query: { phone: selectTable.phone } })
},
2.页面B,获得页面A传过来的参数,同时实现搜索方法,搜索条件就是传过来的参数phone
watch: {
"$route.query.phone"(val) {
if (val) {
this.search.phone = val
console.log(val, "val")
this.handleSearch()
}
}
},
借用$route的query方法传参
这时候,第二步有点问题,页面刚跳转过去的时候没有将参数赋值给搜索的参数,进入页面B的时候并没有执行带参查询,
改造一下,使用
activated(){}
,在B页面一进入的时候,完成赋值
activated() {
if (this.$route.query.phone) {
this.search.phone = this.$route.query.phone
}
console.log(this.$route.query.phone)
this.handleSearch()
},
这样就可以实现了
版权声明:本文为Jiang_XiaoBai007原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。