uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参

由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirectTo方式不同,不能通过路由拼接的方式传参,以下是三种跳转的方法:

在小程序中uni.navigateTo和uni.redirectTo是通过路由拼接的方式传参

uni.navigateTo({
    
    
	url: 'test?id=1&name=uniapp'
});
uni.redirectTo({
    
    
	url: 'test?id=1'
});

uni.navigateBack通过delta控制返回几层

uni.navigateBack({
    
    
	delta: 2
});

下面来聊一聊uni.navigateBack如何实现传参?

第一种:通过状态管理的方式传值;(这种方式就不演示了,给状态管理存值,onShow()中再取值就可以了)
第二种:1、获取所有的的页面栈; 2、取将要跳转页面的实例;3、通过$vm修改即将跳转页面的data里面的参数值;


示例:

下面示例是跳转上一页,然后给上一页data里面的参数传值

//当前页面
chosePhoto(item) {
    
    
	let pages = getCurrentPages(); //获取所有页面栈实例列表
	let nowPage = pages[pages.length - 1]; //当前页页面实例
	let prevPage = pages[pages.length - 2]; //上一页页面实例
    prevPage.$vm.idpositive = item; //修改上一页data里面的参数值
	prevPage.$vm.checkoutface = true; //修改上一页data里面的参数值
	uni.navigateBack({
    
     //uni.navigateTo跳转的返回,默认1为返回上一级
			delta: 1
		});		
	}
//上一页data参数
data() {
    
    
	return {
    
    
		idpositive: '../../static/idcard/idpositive.png',
		checkoutface: false, 
		}
    },

猜你喜欢

转载自blog.csdn.net/m0_47791238/article/details/130146353