目录
在UniApp中，使用uni.navigateTo进行页面跳转并传递参数是非常常见的操作。
（下面为举例为：进入详情页面使用这个跳转传参）
1. 传递简单参数
简单参数指的是字符串、数字等基本类型的参数。我们可以直接将参数拼接在URL后面。
// 跳转并传递简单参数
uni.navigateTo({
url: '/pages/detail/detail?id=1&name=张三&age=20'
});在目标页面（detail.vue）的onLoad生命周期函数中接收参数：
onLoad(options) {
console.log(options.id); // 输出：1
console.log(options.name); // 输出：张三
console.log(options.age); // 输出：20
}2. 传递复杂参数（对象和数组）
如果需要传递对象或数组，我们需要先将它们转换为JSON字符串，然后在目标页面再解析为对象。
// 准备参数
let userInfo = {
name: '李四',
age: 25,
hobbies: ['篮球', '音乐', '旅行']
};
// 将对象转换为JSON字符串
let userInfoStr = JSON.stringify(userInfo);
// 跳转并传递参数
uni.navigateTo({
url: '/pages/detail/detail?userInfo=' + encodeURIComponent(userInfoStr)
});在目标页面（detail.vue）的onLoad中接收并解析参数：
onLoad(options) {
if (options.userInfo) {
let userInfo = JSON.parse(decodeURIComponent(options.userInfo));
console.log(userInfo.name); // 输出：李四
console.log(userInfo.age); // 输出：25
console.log(userInfo.hobbies); // 输出：['篮球', '音乐', '旅行']
}
}
encodeURIComponent是一个JavaScript函数，用于对统一资源标识符（URI）的组件进行编码。它将某些字符替换为一个、两个、三个或四个转义序列（使用UTF-8编码的字符）。为什么需要编码？
URL中有些字符具有特殊含义（例如：
?,&,=,#,%等）。如果参数值中包含这些字符，可能会破坏URL的结构。例如，如果参数值中包含&，那么它可能会被错误地解析为另一个参数的开始。
encodeURIComponent的作用
encodeURIComponent函数会将除了以下字符外的所有字符进行转义：
字母（A-Z a-z）
数字（0-9）
标点符号（
- _ . ! ~ * ' ( )）其他字符都将被替换为百分号（%）后跟两位十六进制数的转义序列。空格被编码为
%20。假设我们要传递一个参数，其值为
hello&world?123，如果不编码，URL可能会被解析为两个参数：/pages/index?message=hello&world=123这里，
message参数的值是hello，而world参数的值是123，这显然不是我们想要的。使用
encodeURIComponent编码后：let value = "hello&world?123"; let encodedValue = encodeURIComponent(value); // "hello%26world%3F123"然后构建URL：
/pages/index?message=hello%26world%3F123在接收端，URL解析器会自动解码（或者我们可以手动解码）得到原始值。
在UniApp中的使用
在UniApp中，当我们使用
uni.navigateTo传递参数时，如果参数值包含特殊字符，务必使用encodeURIComponent进行编码，以避免解析错误。在目标页面中，UniApp会自动对参数进行解码，所以我们直接拿到的参数已经是解码后的原始字符串。注意
与
encodeURIComponent相对的是decodeURIComponent，用于解码经过编码的URI组件。
3. 混合传递简单和复杂参数
在实际开发中，我们经常需要同时传递简单参数和复杂参数。
// 准备参数
let id = 123;
let userInfo = {
name: '王五',
age: 30,
address: {
city: '北京',
district: '海淀区'
}
};
// 将复杂参数转换为JSON字符串
let userInfoStr = JSON.stringify(userInfo);
// 跳转并传递参数
uni.navigateTo({
url: `/pages/detail/detail?id=${id}&userInfo=${encodeURIComponent(userInfoStr)}`
});在目标页面（detail.vue）的onLoad中接收参数：
onLoad(options) {
console.log(options.id); // 输出：123
if (options.userInfo) {
let userInfo = JSON.parse(decodeURIComponent(options.userInfo));
console.log(userInfo.name); // 输出：王五
console.log(userInfo.address.city); // 输出：北京
}
}4. uni.navigateTo的其他参数
uni.navigateTo除了url参数，还有一些其他参数可以设置：
url：要跳转的页面路径，路径后可以带参数。
animationType：窗口的动画效果，有效值：
"slide-in-right"（从右侧横向滑动效果），"slide-in-left"（从左侧横向滑动效果），"slide-in-top"（从顶部竖向滑动效果），"slide-in-bottom"（从底部竖向滑动效果），"fade-in"（渐显效果），"zoom-out"（缩小效果），"zoom-fade-out"（缩小渐隐效果），"pop-in"（从右侧平移入栈效果）。animationDuration：窗口动画持续时间，单位为ms。
events：页面间通信接口，用于监听被打开页面发送到当前页面的数据。
success：接口调用成功的回调函数。
fail：接口调用失败的回调函数。
complete：接口调用结束的回调函数（调用成功、失败都会执行）。
带有events参数：
// 发送页面
uni.navigateTo({
url: '/pages/detail/detail',
events: {
// 为指定事件添加一个监听器，获取被打开页面传回的数据
acceptDataFromOpenedPage: function(data) {
console.log(data);
},
someEvent: function(data) {
console.log(data);
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: '数据来自初始页面' });
}
});
// 目标页面（detail.vue）
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data); // 输出：{ data: '数据来自初始页面' }
});
// 向上一页面发送数据
eventChannel.emit('acceptDataFromOpenedPage', {data: '数据来自detail页面'});
}注意事项：
URL长度限制：传递的参数不宜过多，因为URL有长度限制（不同浏览器限制不同，通常至少2048字符）。
参数编码：传递参数时，如果参数中包含特殊字符（如&、#、%等），需要使用
encodeURIComponent进行编码，接收时使用decodeURIComponent解码。复杂数据：对于复杂数据，建议使用全局状态管理（如Vuex）或本地存储（如uni.setStorage）来共享数据，而不是通过URL传递。