由于小程序跳转限制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里面的参数值;文章来源:https://www.toymoban.com/news/detail-571473.html
示例:
下面示例是跳转上一页,然后给上一页data里面的参数传值
文章来源地址https://www.toymoban.com/news/detail-571473.html
//当前页面
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,
}
},
到了这里,关于uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!