VUE点击链接携带参数跳转到一个新页面
需求:在vue页面把表格某个列做成链接,点击以后携带列的内容作为参数跳转到另外一个页面用携带的参数作为打开页面的查询参数查询页面数据,需要在新窗口打开页面。
代码示例:
<template
slot-scope="scope" >
<el-link
v-if="k === 'runCardNo'"
type="primary"
@click="toBlank(scope.row[k])">{{ scope.row[k] }}</el-link>
<div v-if="k !== 'runCardNo'">{{ scope.row[k] }}</div>
</template>
toBlank(runCardNo) {
const routeData = this.$router.resolve({
path: '/bsdReport/cardHistory',
query: {
runCardNo: runCardNo
}
})
window.open(routeData.href, '_blank')
}
cardHistory页面:
mounted() {
if (this.$route.query.hasOwnProperty('runCardNo')) {
this.queryForm.runCardNo = this.$route.query.runCardNo
this.query()
}
}
在跳转的新页面中在 mounted生命周期中从路由中获取查询参数并赋值给当前查询对象的查询参数,然后调用查询方法