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

断浪young

已于 2023-07-15 11:58:17 修改

阅读量1.1w

点赞数 8

分类专栏：微信小程序文章标签： uni-app java 前端微信小程序

于 2023-07-15 11:57:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59125846/article/details/131737377

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了uniapp中四种传递参数的方法：1)标签跳转通过URL拼接；2)使用uni.navigateTo函数；3)对象转换为字符串并通过URL传递；4)利用uni.$emit和uni.$on进行页面通信。每种方法都包含示例代码，详细解释了如何在不同场景下进行页面间的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：标签跳转

<navigator :url=" './nav?index='+navData">点击传递参数</navigator>

方式二：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)
}

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

<jfSuccess ref="jfS" @submit="openUrl('/pages/competition/perfectInformation/perfectInformation?competitionId=' + competitionId);"></jfSuccess>

方式四：使用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的博客-优快云博客