首页uniapp 页面跳转参数

uniapp 页面跳转参数

时间: 2025-02-10 16:01:26 浏览: 49

### UniApp 页面跳转传递参数 #### 使用 `uni.navigateTo` 进行 URL 编程式传参当需要从一个页面导航到另一个页面并传递参数时，可以使用 `uni.navigateTo` 方法。此方法允许通过 URL 查询字符串的形式传递数据。 ```javascript // 起始页面跳转到 test.vue 并传递 id 和 name 参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); ``` 在目标页面中可以通过 `onLoad` 生命周期函数获取这些参数[^1]： ```javascript export default { onLoad(options) { console.log('接收到的id:', options.id); // 输出: 接收到的id: 1 console.log('接收到的名字:', options.name); // 输出: 接收到的名字: uniapp } } ``` #### 利用 `<navigator>` 组件实现页面间的链接与传参除了编程方式外，还可以利用内置组件 `<navigator>` 来创建可点击的超链接来进行页面之间的跳转，并附带参数[^2]: ```html <navigator url="/pages/mine/mine?id=1&name=uniapp">跳转</navigator> ``` 同样，在接收端也能够通过 `options` 对象读取上述参数。 #### Query Object 方式的参数传递对于更复杂的场景下，如果希望以更加结构化的方式处理多个查询参数，则可以直接构建 query object 后再将其转换成字符串形式附加于 URL 上[^3]: ```javascript const params = { param1: 'value1', param2: 'value2' }; const queryString = Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key])}`).join('&'); uni.navigateTo({ url: `/path/to/page?${queryString}` }); ``` 这种方法不仅提高了代码的可维护性和清晰度，而且更容易扩展和管理大量参数的情况。

阅读全文