uniapp跳转页面并传参数
时间: 2024-09-13 14:15:59 浏览: 48
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,可以编译到 iOS、Android、以及各种小程序等多端平台。在 uni-app 中跳转页面并传递参数可以通过编程式导航来实现。
具体步骤如下:
1. 使用 `uni.navigateTo`、`uni.redirectTo`、`uni.reLaunch` 等 API 进行页面跳转。
2. 在跳转的目标页面中通过 `onLoad` 方法获取传递的参数。
以下是一个简单的示例:
在源页面中进行跳转并传递参数:
```javascript
// 源页面
uni.navigateTo({
url: '/pages/targetPage/targetPage?id=' + this.someData.id
});
```
或者使用编程式导航的方式:
```javascript
// 源页面
uni.navigateTo({
url: `/pages/targetPage/targetPage?id=${encodeURIComponent(this.someData.id)}`
});
```
在目标页面中获取传递的参数:
```javascript
// 目标页面
export default {
onLoad: function(options) {
// options.id 就是传递过来的参数值
console.log(options.id);
}
};
```
请注意,在传递参数时应当使用 `encodeURIComponent` 对参数进行编码,避免因特殊字符导致的问题。
阅读全文