uni-app 实现navigateBack返回修改前一页面数据（H5、APP、小程序）

B页面返回修改A页面title的值

//A页面 <template> <text class="title">返回修改的值：{{title}}</text> </template> export default { data() { return { title: 'Hello' } }, } //B页面 <button @click="change">修改上一页的title值</button>

方案一： getCurrentPages() 注：虽然都是通过getCurrentPages，但H5和APP/小程序通过getCurrentPages打印出来的前一页面的结构是不同的。

H5

change(e){ var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 //将前一页的title修改为"Hello World" prevPage._data.title = 'Hello World' //因为修改的是data里面的绑定数据，所以返回后页面数据会直接显示修改后的 uni.navigateBack() },

APP/小程序

//B页面 change(e){ var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 //console.log(prevPage ); //按照打印结构这样赋值虽然成功但页面数据不会修改 // prevPage.data.$root[0].title = 'Hello World' prevPage.setData({ title: 'Hello World' }) uni.navigateBack() }, //A页面，onShow方法，把setData的数据赋值到当前页面绑定的变量上 onShow(e) { let pages = getCurrentPages(); let currPage = pages[pages.length-1]; if(currPage.data.title == undefined || currPage.data.title == ''){ }else{ this.title = currPage.data.title } },

方案二：$on监听

//A页面, onShow中添加监听一个handleFun的事件 onShow(){ uni.$on("handleFun", res => { this.title = res.title； // 清除监听 uni.$off('handleFun'); }) }, //B页面， 返回A页面触发一个事件，使用uni.$emit("handleFun",{}) getAddress(){ uni.$emit("handleFun",{title: 'Hello World'}); uni.navigateBack() }

参考：https://www.cnblogs.com/vicky123/p/12856011.html’