uniapp开发微信小程序笔记7-页面跳转、跳转传参、接收参数

前言：

uni-app中提供了两种页面跳转方式：

1. 组件跳转
2. API跳转

一、组件跳转

		<navigator url="/pages/mine/mine">跳转</navigator>

二、API跳转

API方法	备注
uni.navigateTo()	1、不能跳转到tabBar页面 2、保留当前页面，可以通过uni.navigateBack返回
uni.redirectTo()	1、不能跳转到tabBar页面 2、关闭当前页面，不能返回
uni.reLaunch();	1、可以跳转到任意页面 2、关闭所有页面，不能返回
uni.switchTab()	1、跳转到tabBar页面 2、关闭其他所有非tabBar页面
uni.navigateBack()	1、返回上一页面或多级页面 2、关闭当前页面

以上api比较常用的就是 uni.navigateTo()、uni.switchTab()、uni.navigateBack()，更详细的讲解可以查看官方文档

示例代码：

uni.navigateTo({
	url: 'test'
});

uni.redirectTo({
	url: 'test'
});

uni.reLaunch({
	url: 'test'
});

uni.switchTab({
	url: '/pages/index/index'
});

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，
//而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B'
});

// 此处是B页面
uni.navigateTo({
	url: 'C'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

三、跳转传参

1、传递参数

跳转时通过路由进行传参，参数都是直接跟在路径后面，用？分割路径和参数：

 示例代码：

<navigator url="/pages/mine/mine?id=1&name=uniapp">跳转</navigator>

uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

2、接收参数

在页面的生命周期onLoad内获取传递过来的参数

示例代码

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