uniapp 跳转页面及传递参数 传参

目录

 

1.标签跳转

2.api跳转

3.使用混入的方法传参

4.使用uni.$emit和uni.$on页面通讯

---

---

类型转换

如开题所说，因为URL传递的只能是字符串，传递JSON、ARRAY不是字符串时候需要先转成字符串，然后接收后再换回来。

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


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

1.标签跳转

点击传递参数

2.api跳转

//在起始页面跳转到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); //打印出上个页面传递的参数。
    }
}

3.使用混入的方法传参

4.使用uni.$emit和uni.$on页面通讯

uni.$emit(eventName,OBJECT)
触发全局的自定义事件，附加参数都会传给监听器回调函数。
uni.$on(eventName,callback)
监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
uni.$off([eventName, callback])
移除全局自定义事件监听器。

//在子页面定义事件传参
 uni.$emit('update',{msg:'页面更新'})


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