uniapp页面间传值技巧汇总

"uniapp日常总结-uniapp页面传值" 在uniapp开发过程中，页面间的通信和数据传递是非常关键的一环，尤其是在前后端分离的前端框架中，如基于Vue的uniapp。本文将详细介绍uniapp中实现页面间传值的两种主要方式：URL参数传递和页面参数（Query）传递。 1. URL参数传递： - 在进行页面跳转时，可以在链接中附加参数，通过`uni-link`组件或者直接在URL中使用问号（?）分割键值对。例如： ```html <uni-link:url="'/pages/targetPage/targetPage?param1='+value1+'&param2='+value2">跳转到目标页面</uni-link> ``` 在目标页面（如`targetPage.vue`）的`mounted`生命周期钩子中，可以使用`this.$route.params`属性来获取这些参数： ```javascript export default { mounted() { const param1 = this.$route.params.param1; const param2 = this.$route.params.param2; console.log(param1, param2); } } ``` URL参数传递适用于需要在多个页面之间共享信息且不希望刷新页面的情况。 2. 页面参数（Query）传递： - Query传递通常用于在页面间进行异步操作后返回特定数据。有以下两种常用方式： - 在事件触发时，调用`uni.navigateTo`方法，传递一个包含参数的对象： ```javascript uni.navigateTo({ url: '/pages/targetPage/targetPage', success(res) { console.log(res); }, fail(err) { console.error(err); }, method: 'query', // 使用query表示URL参数 query: { key1: 'value1', key2: 'value2' } // 要传递的参数 }); ``` - 或者简写为直接在URL后面拼接键值对： ```javascript uni.navigateTo({ url: '/pages/targetPage/targetPage?key1=value1&key2=value2' }); ``` 目标页面同样可以通过`this.$route.query`来获取这些查询参数。 Query传递适合在父页面向子页面传递临时或者非敏感的数据，且不需要页面状态持久化的情况。 这两种方式各有优缺点，URL参数传递易于理解和维护，但只适合传递少量信息；而Query传递适合在需要保持查询字符串简洁、传递动态数据或进行异步操作后返回数据时使用。开发者应根据实际需求灵活选择合适的方式进行页面间传值。