uni-app基础 1.3.2-路由跳转和页面通讯

代码哈士奇

发布于 2022-04-13 17:59:22

35300

代码可运行

文章被收录于专栏：dmhsq_csdn_blogdmhsq_csdn_blog

运行总次数：0

代码可运行

路由跳转和页面通讯

点击查看视频教程跳到b站课程文档地址

注意区别

练习配置在pages.json下配置一个tarBar

"tabBar": {
	"list": [{
	    "pagePath": "pages/index/index",
	    "text": "index"
	}, {
	    "pagePath": "pages/one/one",
	    "text": "one"
	}]
}

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面

路由传参

uni.navigateTo({ url: ‘xxxxx?xxx=xxx&xxx=xxx’ });

页面通讯

请给我数据 two

收到，准备返回数据 two

请接受 index

已接受 index

index.vue
uni.navigateTo({
	url: '../two/two',
	events: {
		recive: function(data) {
			console.log(data.data)
			console.log("已接受")
		}
	},
	success: function(res) {
		res.eventChannel.emit('send', {
			data: '请给我数据'
		})
	}
})

two.vue
onLoad() {
	const eventChannel = this.getOpenerEventChannel();
	eventChannel.on('send', function(data) {
		console.log(data.data)
		console.log("收到，准备返回数据")
	})
	eventChannel.emit('recive', {
		data: "请接受"
	});
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/01/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json