uniapp页面路由传参接收传值

<think>好的，我现在需要回答用户关于UniApp中页面路由参数传递与接收的问题。首先，我要回忆一下UniApp的相关知识，确保信息的准确性。根据用户提供的引用内容，UniApp可以通过URL参数传递数据，使用navigateTo或redirectTo方法，并且需要注意编码和长度限制。 首先，我应该分步骤说明传递参数的方法。例如，在跳转时如何拼接参数，特别是使用encodeURIComponent处理特殊字符。同时，要给出示例代码，比如在navigator组件和API方法中的不同用法。 接下来，接收参数的步骤也很重要。用户需要在目标页面的onLoad生命周期函数中获取option对象，然后解码并解析参数。这里要强调使用decodeURIComponent和JSON.parse的正确顺序，避免出错。 另外，用户提到的引用内容中有提到URL长度限制和替代方法，比如窗体通信或全局变量。这部分可以作为注意事项补充，提醒用户在参数过长或包含特殊字符时的解决方案。 需要确保所有代码示例符合用户提供的引用内容，比如正确的编码方式和参数处理。同时，检查是否有遗漏的细节，比如页面栈的区别（navigateTo保留当前页，redirectTo关闭当前页），这些可能影响用户的使用场景。 最后，生成相关问题时要围绕参数传递的其他方法、处理特殊字符的方式以及替代方案展开，帮助用户进一步了解相关知识。确保整个回答结构清晰，步骤明确，示例代码正确，并且注意事项突出，避免常见错误。</think>### UniApp页面路由参数传递与接收教程 #### 一、参数传递方法 1. **URL参数直接拼接** 在路由跳转时，通过`?key=value`格式拼接参数，多个参数用`&`连接： ```javascript uni.navigateTo({ url: '/pages/detail/detail?id=123&name=test' //明文参数 }) ``` 2. **处理特殊参数**（对象/含特殊字符） 需使用`encodeURIComponent`编码和`JSON.stringify`序列化： ```javascript const item = { id: 1, name: '特殊字符!@#' } // API跳转方式 uni.redirectTo({ url: `/pages/detail/detail?item=${encodeURIComponent(JSON.stringify(item))}` }) // navigator组件方式 <navigator :url="'/pages/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))" >跳转</navigator> ``` #### 二、参数接收方法 在目标页面的`onLoad`生命周期函数中解析参数： ```javascript export default { onLoad(options) { // 普通参数直接获取 console.log('ID:', options.id) // 处理编码后的对象参数 if(options.item) { const decodedItem = decodeURIComponent(options.item) const itemObj = JSON.parse(decodedItem) console.log('对象参数:', itemObj) } } } ``` #### 三、注意事项 1. **URL长度限制** 单条URL建议不超过2KB，超长数据建议使用[全局变量](^3)或[vuex状态管理](^3) 2. **页面栈差异** - `navigateTo`保留当前页（可返回） - `redirectTo`关闭当前页（不可返回） 3. **编码必要性** 未编码的包含空格参数会导致解析异常，例如： ```javascript // 错误示例（未编码空格） url: '/pages/detail/detail?query=hello world' // 正确做法 url: `/pages/detail/detail?query=${encodeURIComponent('hello world')}` ``` #### 四、完整示例 ```javascript // 页面A发送参数 const product = { id: 1001, name: '手机', price: 2999, specs: ['6.5寸', '5G'] } uni.navigateTo({ url: `/pages/product/detail?product=${encodeURIComponent(JSON.stringify(product))}` }) // 页面B接收参数 onLoad(options) { try { const productStr = decodeURIComponent(options.product || '{}') this.product = JSON.parse(productStr) } catch(e) { console.error('参数解析失败', e) } } ```