uniapp返回上一页携带参数,两种方法,实测有效
方法一:
- pages/pre/pre.vue
<template>
<view>
<view>返回的数据为:</view>
<view>id: {{testdata.id}}</view>
<view>name: {{testdata.name}}</view>
<button type="primary" @click="goNext">跳转到下一页面</button>
</view>
</template>
<script>
export default {
data() {
return {
testdata: {
id: '',
name: ''
}
}
},
onShow() {
let that = this
uni.$on('updateData',function(data){
that.testdata = data
const params = 'id:'+data.id+', name:'+data.name;
console.log('监听到事件来自 updateData ,携带参数为:' + params);
})
},
methods: {
goNext() {
uni.navigateTo({
url: '/pages/next/next'
})
}
}
}
</script>
<style>
</style>
- pages/next/next.vue
<template>
<view>
<button type="primary" @click="goBack">点击返回上一页</button>
</view>
</template>
<script>
export default {
data() {
return {
mydata: {
id: 1,
name: 'test'
}
}
},
methods: {
goBack() {
uni.$emit('updateData', this.mydata)
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
</style>
方法二(相对来说,没有方法一简练):
- pages/pre/pre.vue
<template>
<view>
<view>返回的数据为:</view>
<view>id: {{testdata.id}}</view>
<view>name: {{testdata.name}}</view>
<button type="primary" @click="goNext">跳转到下一页面</button>
</view>
</template>
<script>
export default {
data() {
return {
testdata: {
id: '',
name: ''
}
}
},
onShow() {
let pages = getCurrentPages();
let currPage = pages[pages.length - 1]; //当前页面
if(currPage.data != undefined){
let json = currPage.data.testdata;
this.testdata = json;
}
},
methods: {
goNext() {
uni.navigateTo({
url: '/pages/next/next'
})
}
}
}
</script>
<style>
</style>
- pages/next/next.vue
<template>
<view>
<button type="primary" @click="goBack">点击返回上一页</button>
</view>
</template>
<script>
export default {
data() {
return {
mydata: {
id: 1,
name: 'test'
}
}
},
methods: {
goBack() {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
// #ifdef H5
prevPage.$vm.testdata = this.mydata;
// #endif
// #ifdef MP-WEIXIN
prevPage.setData(this.mydata);
// #endif
uni.navigateBack({//返回
delta: 1
})
}
}
}
</script>
<style>
</style>
相信坚持的力量,日复一日的习惯.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
2021-02-23 长链接测试js
2021-02-23 nginx http https 配置案例
2021-02-23 http访问转为https
2019-02-23 无限级树状图css实现
2019-02-23 无限级别分类嵌套格式抓取