uni-app 之返回上一个页面并传递参数(以微信小程序为例)
在uni-app中,想要返回页面时获取参数。需要用到当前页面的堆栈getCurrentPages()。
背景
要求:从页面1跳转到页面2, 然后页面2返回页面1时代参数。
实现
在页面2返回按钮,或监听返回事件时,执行方法。
1 reBack: function() { 2 let pages = getCurrentPages(); 3 if (pages.length >= 2) { 4 let curPage = pages[pages.length - 1]; // 当前页面 5 let prePage = pages[pages.length - 2]; // 上一页面 6 // #ifdef H5 7 prePage.$vm.param1 = 1; 8 prePage.$vm.param2 = 2; 9 // #endif 10 // #ifdef MP-WEIXIN || MP-QQ 11 prePage.setData({ 12 param1: 1, 13 param2: 2 14 }) 15 // #endif 16 uni.navigateBack(); 17 } 18 }
在页面1的生命周期 onShow 监听或获取当前页面的参数。
onShow: function() { let pages = getCurrentPages(); let curPage = pages[pages.length - 1]; // #ifdef MP-WEIXIN || MP-QQ console.log("param1", curPage.data.param1); console.log("param2", curPage.data.param2); // #endif // #ifdef H5 console.log("param1", curPage.$vm.param1); console.log("param2", curPage.$vm.param2); // #endif },
这里,当从页面2返回页面1时,输出值为
param1 1param2 2
注:H5 和微信、QQ等小程序设置和获取页面参数的方法不同。
有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。