# uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)
从A页面跳到B页面,在从B页面返回跳到A页面,改变A页面的值。
//A页面
<template>
<view class="title">返回修改的值:{{title}}</view>
</template>
export default {
data() {
return {
title: 'change'
}
},
}
//B页面
<button @click="changeAPage">修改上一页的title值</button>
- 1、方法一: 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
}
},
//A页面, onShow中添加监听一个handleFun的事件
onShow(){
uni.$on("handleChange", res => {
this.title = res.title;
// 清除监听
uni.$off('handleFun');
})
},
//B页面, 返回A页面触发一个事件,使用uni.$emit("handleChange",{})
getAddress(){
uni.$emit("handleChange",{ title: 'Hello World' });
uni.navigateBack()
}
- 方法3:缓存值的方式。
用uniapp里面的存储方法,跳页面之前吧值给存起来。