【最全】uni-app 页面跳转及参数传递

方式一：标签跳转

点击传递参数

方式二：url跳转 

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'//可进行字符串拼接
});

//在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

如果传递的数据为对象：则需要把对象转成字符串，新页面接收后把字符串解析为对象

var mynavData = JSON.stringify(that.navData); // 这里转换成 字符串
uni.navigateTo({
    url:'./nav?index='+mynavData
})

//新页面接收后：
onLoad(option) {
    var data = JSON.parse(option.index); // 字符串转对象
    console.log(data)
}

方式三：使用混入的方法传参

方式四：使用uni.$emit和uni.$on页面通讯

//触发全局的自定义事件，附加参数都会传给监听器回调函数。
uni.$emit(eventName,object)

//监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
uni.$on(eventName,callback)

//移除全局自定义事件监听器。
uni.$off([eventName, callback])

//在子页面定义事件传参
uni.$emit('update',{msg:'页面更新'})
 
//在父页面接受参数
export default {
    onLoad: function () { 
        uni.$on('update',function(data){
        	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    	})
    }
}

参考文章：uniapp 跳转页面及传递参数 传参_uniapp跳转页面传参数_weixin_51603392的博客-CSDN博客