uniapp跳转方式整理&&uniapp事件通信

179 阅读1分钟

一.uniapp跳转方式整理

请参考uniapp官方文档 uniapp.dcloud.net.cn/api/router.…

二.uniapp事件通信

1.直接带参

from页面

//在起始页面跳转到to页面并传递参数
uni.navigateTo({
	url: 'to?id=1&name=uniapp'
});

to页面

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

2.eventChannel

from页面

// 在起始页面跳转到to页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1'success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('data', { data: 'data from starter page' })
  }
})

to页面

// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel()
  // 获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('data', function(data) {
    console.log(data)
  })
}