uni.navigateto传参必须拼接url query字符串,因uni-app不支持动态路由,所有参数须经encodeuricomponent编码,接收端onload中options均为字符串,需手动类型转换,复杂对象应改用eventchannel。

uni.navigateTo 传参必须拼 query 字符串
uni-app 小程序端不支持 Vue Router 那样的动态路由(如 /detail/:id),所有参数都得走 URL query。这意味着你不能靠路径占位符取值,只能靠 onLoad 接收 options 对象里的键值对。
常见错误是写成:uni.navigateTo({ url: '/pages/detail/detail?id=' + id }) —— 看似没问题,但遇到中文、空格、&、= 等字符会直接崩,B 页面收到的 options.name 可能是截断或乱码。
- 必须对每个非数字/字母参数做
encodeURIComponent(),比如name、desc - 数字类参数(如
id)可不编码,但接收时仍要手动转类型:Number(options.id) - 避免把整个对象 JSON.stringify 后塞进 URL —— 微信小程序 URL 长度限制约 2048 字节,超长直接静默失败
onLoad 中 options 始终是字符串,不自动类型转换
哪怕你传的是 id=123,options.id 拿到的仍是 "123",不是数字;传 is_show=true,拿到的是 "true",不是布尔值。框架不做任何隐式转换。
所以别写 v-if="options.is_show",它永远为真(非空字符串);也别直接用 options.id + 1,结果是 "1231"。
- 数字:用
Number(options.id) || 0或parseInt(options.id, 10) - 布尔:用
options.is_show === 'true'(注意是字符串比较) - 数组或对象:不要走 query,改用
eventChannel或全局状态
特殊字符没编码 → decodeURIComponent 报错或丢参数
如果 A 页面漏了 encodeURIComponent,比如传了 name=张三&city=北京-朝阳,B 页面 onLoad 里调用 decodeURIComponent(options.name) 会直接抛错,因为 & 被当成 query 分隔符,city 根本收不到。
微信开发者工具里看不到明显报错,只表现为 options 缺字段,或者值被截断。
- 安全做法:所有非纯英文数字字段,统一过
encodeURIComponent - 接收端加保护:用
try/catch包裹decodeURIComponent,失败则原样返回 - 调试技巧:在 B 页面
console.log(options),看 URL 解析后实际拿到什么 —— 这比猜更准
需要传对象或复杂结构?别硬塞 query,用 eventChannel
query 只适合扁平、简短、可序列化的参数。一旦要传 { user: { id: 1, avatar: 'xxx', tags: ['vip', 'new'] } },URL 会迅速膨胀,且跨平台(尤其是支付宝小程序)对 query 长度更敏感。
eventChannel 是小程序官方提供的页面间通信机制,专为这类场景设计,不经过 URL,无长度限制,也不受编码困扰。
- A 页面跳转时带上
events配置和success回调发初始数据 - B 页面用
this.getOpenerEventChannel()监听和发送 - 注意生命周期:B 页面
onLoad里才能拿到eventChannel,onShow已失效
真正难的不是怎么传,而是什么时候该用 query、什么时候该切 eventChannel —— 参数超过 3 个字段,或含嵌套结构,就该切了。这点容易被忽略,等上线后用户点不动才去查,代价更大。










