uni-app项目 使用navigateBack返回上一页并传参 修改前一页面数据

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://blog.youkuaiyun.com/weixin_44433499/article/details/109222663

### 返回上级页面时传递数的解决方案 在 UniApp 和 Vue 3 的开发环境中,`uni.navigateBack()` 是用于返回一页面的方法。如果需要在此过程中传递数,则可以通过 `url` 数或者全局状态管理工具(如 Vuex 或 Pinia)来实现。 #### 使用 `url` 数的方式 当调用 `uni.navigateTo()` 跳转到新页面时,可以将数据存储在个临时变量中,在目标页面加载完成后通过事件机制通知其读取这些数据。然而更常见的是利用 `onUnload` 生命周期方法配合全局对象保存数据[^1]: ```javascript // 页面A跳转至Buni.navigateTo({ url: '/pages/B?param=' + encodeURIComponent(JSON.stringify(data)) }); ``` 对于返回操作中的传参需求,可以在 B 页面卸载把要回的数据存放到 globalData 或者其他共享区域里;之后 A 页面监听特定条件触发刷新逻辑完成最终效果呈现[^2]: ```javascript // 在页面B准备离开之设置globalData const app = getApp(); app.globalData.returnedParam = someValue; // 然后执行回退动作 uni.navigateBack({ delta: 1 // 表示回到上页面 }); // 页面A接收处理来自B页的信息 Page({ onShow() { const appInstance = getApp(); let returnedInfo = appInstance.globalData.returnedParam; if (returnedInfo !== undefined && returnedInfo !== null){ this.setData({ keyName: returnedInfo }); delete appInstance.globalData.returnedParam; // 清理不再使用的属性防止污染内存空间 } } }) ``` #### 利用 Vuex 进行跨页面通信 另种更加优雅的做法就是引入状态管理模式——Vuex 来统管理和分发应用内的各种信息流变化情况[^3] 。下面给出基于此思路的个简单例子说明如何借助它达成相同目的: ```javascript // store.js 配置文件定义state以及mutations函数用来改变该值 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state:{ sharedParameter:null, }, mutations:{ setSharedParameter(state, payload){ state.sharedParameter=payload; } } }) // 页面B即将关闭之际提交mutation更新store里的sharedParameter字段内容 this.$store.commit('setSharedParameter', {message:'hello world!'}); // 接着正常调用navigateBack指令即可 uni.navigateBack(); // 最终于页面A内部订阅上述改动从而做出相应反应调整UI界面显示状况等等... watchEffect(() => { console.log(this.$store.state.sharedParameter); }); ``` 以上两种方式各有优劣之处需根据实际项目场景灵活选用合适的技术手段解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值