uniapp页面传值接收不到？

Question

在使用 UniApp 进行跨页面传值时，常遇到通过 `uni.navigateTo` 传递参数后，在目标页面无法正常接收的问题。典型场景是通过 URL 查询字符串（如 `?id=123`）传参，但在目标页面的 `onLoad` 生命周期中获取不到参数值。该问题多因路径拼写错误、参数未正确编码或页面栈层级异常导致。此外，若使用 `data` 或全局变量直接传递复杂对象，也会因页面重新渲染而丢失。建议统一使用 `onLoad` 接收路由参数，并对特殊字符进行 `encodeURIComponent` 处理，确保传值可靠。

Answer 1

1. 问题背景与常见表现

在使用 UniApp 开发跨平台应用时，页面间传值是一个高频操作。开发者常通过 uni.navigateTo 方法跳转页面并携带参数，例如：

uni.navigateTo({
    url: '/pages/detail/index?id=123&name=test user'
});

然而，在目标页面的 onLoad 生命周期中，有时获取不到预期的参数值，表现为 options.id 为 undefined 或参数值被截断、乱码。

典型错误场景包括：

• 路径拼写错误，如页面路径大小写不一致或文件不存在
• URL 中包含空格或特殊字符未编码（如中文、&、=）
• 页面栈层级异常导致传参丢失
• 误用 data 或全局变量传递复杂对象，因页面重建而失效

2. 深入分析：从生命周期到路由机制

UniApp 基于 Vue 框架封装了多端运行能力，其页面跳转依赖原生导航栈。每次调用 uni.navigateTo 会将新页面推入栈中，并触发目标页的 onLoad(options) 钩子函数接收参数。

关键点在于：只有 URL 查询字符串中的参数会被自动解析并传入 onLoad，其他方式（如直接赋值 data）无法跨页面持久化。

以下表格对比了不同传参方式的可靠性：

传参方式	适用场景	是否支持复杂对象	是否持久	风险提示
URL 查询字符串	基本类型传参	否	是	需编码处理特殊字符
globalData	全局状态共享	是	是	易造成内存泄漏或数据污染
vuex / pinia	状态管理	是	是	适合大型项目，增加复杂度
eventBus	事件通信	是	否	异步不可靠，页面销毁后失效

3. 核心解决方案：正确使用 onLoad 与参数编码

推荐统一采用 onLoad 接收路由参数，并对所有动态值进行 encodeURIComponent 编码：

const id = 123;
const name = '测试用户&角色=admin';
uni.navigateTo({
    url: `/pages/detail/index?id=${id}&name=${encodeURIComponent(name)}`
});

在目标页面接收：

export default {
    onLoad(options) {
        console.log('接收到的参数:', options);
        const id = options.id;
        const name = decodeURIComponent(options.name || '');
        this.setData({ id, name });
    }
}

注意：即使参数是数字，也建议始终以字符串形式传递，避免解析歧义。

4. 高级技巧：封装安全传参工具函数

为提升开发效率和健壮性，可封装一个通用跳转方法：

function safeNavigate(url, params = {}) {
    let query = Object.keys(params).map(key => {
        return `${key}=${encodeURIComponent(params[key])}`;
    }).join('&');
    const finalUrl = query ? `${url}?${query}` : url;
    uni.navigateTo({ url: finalUrl });
}

// 使用示例
safeNavigate('/pages/detail/index', { id: 123, name: '张三&李四' });

该函数自动处理编码，避免手动拼接出错。

5. 异常排查流程图

当出现传参失败时，可通过以下 Mermaid 流程图快速定位问题：

graph TD
    A[调用 uni.navigateTo] -- 路径是否存在? --> B{路径正确}
    B -- 否 --> C[检查 pages.json 是否注册]
    B -- 是 --> D[参数是否含特殊字符?]
    D -- 是 --> E[是否使用 encodeURIComponent]
    E -- 否 --> F[添加编码处理]
    D -- 否 --> G[目标页 onLoad 是否存在]
    G -- 否 --> H[确认生命周期钩子定义]
    G -- 是 --> I[打印 options 调试]
    I -- 仍为空 --> J[检查页面栈深度或重定向逻辑]
    J -- 存在多次跳转 --> K[考虑使用 vuex 存储中间状态]
    

此流程覆盖了90%以上的传参异常场景。

6. 复杂对象传递的最佳实践

对于无法序列化的复杂对象（如 Date、Function、嵌套对象），不应直接放入 URL。可行方案包括：

1. 使用 uni.setStorageSync 临时存储对象，跳转后读取并清除
2. 利用 Vuex/Pinia 管理跨页面状态
3. 通过事件总线（EventBus）发布-订阅模式传递引用

示例：使用本地缓存传递对象

// 发送端
const obj = { userId: 1001, profile: { name: 'Alice', tags: ['dev', 'uniapp'] } };
const key = 'temp_data_' + Date.now();
uni.setStorageSync(key, obj);
uni.navigateTo({ url: `/pages/detail/index?dataKey=${key}` });

// 接收端
onLoad(options) {
    if (options.dataKey) {
        const data = uni.getStorageSync(options.dataKey);
        uni.removeStorageSync(options.dataKey); // 及时清理
        this.dataObj = data;
    }
}