uni.navigateTo在H5端加参数

### uni.navigateTo 在 H5 端传递参数的使用方法 在 H5 端使用 `uni.navigateTo` 时，可以通过 URL 参数的方式传递数据。以下是具体的实现方式和注意事项。 #### 1. 使用 URL 参数传递固定值 如果需要传递固定的参数值，可以直接将参数拼接到目标页面的 URL 中[^1]。例如： ```javascript // 起始页面跳转到 test.vue 并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); ``` 在目标页面 `test.vue` 中接收参数： ```javascript export default { onLoad: function (option) { // option 为 object 类型，会序列化上个页面传递的参数 console.log(option.id); // 打印出上个页面传递的参数 id console.log(option.name); // 打印出上个页面传递的参数 name } }; ``` #### 2. 使用动态变量传递参数 当需要传递当前页面的动态变量时，可以将变量拼接到 URL 中[^2]。例如： ```javascript data() { return { Value: 'dynamicValue' }; } // 起始页面跳转到 test.vue 并传递动态参数 uni.navigateTo({ url: 'test?Value=' + this.Value }); ``` 在目标页面 `test.vue` 中接收参数： ```javascript export default { onLoad: function (option) { console.log(option.Value); // 打印出上个页面传递的动态参数 } }; ``` #### 3. 处理大数值或复杂数据类型的传递 如果需要传递非常大的数字或复杂数据类型（如对象、数组等），直接通过 URL 参数可能会导致精度丢失或编码问题。此时可以考虑使用全局事件机制，例如 `uni.emit` 和 `uni.on`[^3]。以下是一个示例： ```javascript // 起始页面 const bigIntStr = '12873198273123123124'; uni.navigateTo({ url: '/pages/target/target', success: (res) => { // 通过 eventChannel 传递数据给目标页面 res.eventChannel.emit('passData', { value: bigIntStr }); } }); ``` 在目标页面 `target.vue` 中接收数据： ```javascript onLoad: function (option) { const eventChannel = this.getOpenerEventChannel(); eventChannel.on('passData', (data) => { console.log(data.value); // 接收到起始页面传递的大数值 }); } ``` #### 4. 处理特殊字符（如 URL）的传递 如果需要传递包含特殊字符的参数（如 URL），需要注意对参数进行编码和解码处理，以避免出现解析错误或警告信息[^4]。例如： ```javascript // 起始页面 const urlParam = encodeURIComponent('http://lt.sapxw.com/H5ErWeiMa/indexH5.aspx?id=290949&ckdh=637695418429358201'); uni.navigateTo({ url: 'test?url=' + urlParam }); ``` 在目标页面 `test.vue` 中接收并解码参数： ```javascript export default { onLoad: function (option) { const decodedUrl = decodeURIComponent(option.url); console.log(decodedUrl); // 打印出完整的 URL 参数 } }; ``` ### 注意事项 - 在 H5 端使用 `uni.navigateTo` 时，URL 参数长度可能受到浏览器限制，建议避免传递过长的字符串。 - 如果需要返回时携带参数，可以参考 `uni.navigateBack` 的相关实现[^5]。 ---