uniapp用法--uni.navigateTo 使用与参数携带的方式示例（包含复杂类型参数）

一、基本用法

1. ‌功能特性‌

   • 保留当前页面，将新页面推入导航栈顶部（适用于非 tabBar 页面跳转）‌。
   • 可通过 uni.navigateBack 返回原页面‌34。

2. ‌代码示例

uni.navigateTo({
    url: '/pages/detail/detail?key=value' // 目标页面路径及参数
});

二、可携带参数类型

1. ‌基础类型参数‌

   • ‌字符串/数值‌：直接拼接在 URL 后，如 url: '/pages/pageA?id=123&name=test'‌。
   • ‌布尔值‌：需转换为字符串传递（如 flag=true）。

2. ‌复杂类型参数‌

   • ‌对象/数组‌：需先通过 JSON.stringify() 序列化，并用 encodeURIComponent() 编码处理‌。
     示例：

// 发送页面
const data = { list: [1,2,3], obj: { key: "value" } };
uni.navigateTo({
    url: `/pages/pageB?data=${encodeURIComponent(JSON.stringify(data))}`
});

// 接收页面（目标页面的 onLoad 函数）
onLoad(options) {
    const parsedData = JSON.parse(decodeURIComponent(options.data));
}

三、注意事项

1. ‌路径规范‌

   • 目标页面需在 pages.json 中注册，路径必须以 / 开头（如 /pages/home/home）‌。

2. ‌参数长度限制‌

   • URL 总长度受浏览器或平台限制，建议复杂数据优先使用本地缓存（如 uni.setStorageSync）‌。

3. ‌跳转限制‌

   • 无法直接跳转至 tabBar 页面（需改用 uni.switchTab）‌。

四、参数接收示例

目标页面通过 onLoad 生命周期函数获取参数：

export default {
    onLoad(options) {
        // 基础参数
        console.log(options.id); // 输出 123
        // 复杂参数（需解码并反序列化）
        const obj = JSON.parse(decodeURIComponent(options.obj));
    }
}

（注：以上实现方式适用于 2025 年 UniApp 最新版本，参数传递逻辑与主流框架保持一致‌。）