Vue页面跳转传参
在有些时候,我们需要跳转到其他页面,但是没有接口将相应的数据传过去,需要前端自己将数据传到另一个页面,那这样的情况怎么做呢?
·
在有些时候,我们需要跳转到其他页面,但是没有接口将相应的数据传过去,需要前端自己将数据传到另一个页面,那这样的情况怎么做呢?
要进行传递参数的页面
首先,在相应的button按钮上,将点击事件附上
<template slot-scope="{ row }">
<el-button @click="goChange(row)">点击传参</el-button>
</template>
然后在 methods 下将点击事件添加
methods: {
// 跳转到传递参数页
goChange(row) {
this.$router.push({
path: '要跳转的页面地址',
query: {
cardNoFirst: row.cardNoFirst,
cardNoEnd: row.cardNoEnd
}// 要传递的参数
})
}
}
要接受参数的页面
data() {
return {
cardNoFirst: '',
cardNoEnd: ''
}
},
watch: {
'$route': 'gettingData'
},
created() {
this.gettingData()
},
methods: {
// 获取数据
gettingData() {
var queryCardNoFirst = this.$route.query.cardNoFirst
var queryCardNoEnd = this.$route.query.cardNoEnd
this.cardNoFirst = queryCardNoFirst
this.cardNoEnd = queryCardNoEnd
}
}
或者更简单的(接收参数的页面)
data() {
return {
cardNoFirst: this.$route.query.cardNoFirst,
cardNoEnd: this.$route.query.cardNoEnd
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)