uniapp带多个参数跳转页面
时间: 2023-08-06 21:04:45 浏览: 60
在uni-app中,可以使用`uni.navigateTo`方法来进行页面跳转,并且可以携带多个参数。下面是一个示例代码:
```javascript
// 跳转页面时携带参数
uni.navigateTo({
url: '/pages/targetPage?param1=value1¶m2=value2',
success: function(res) {
console.log('跳转成功');
},
fail: function(err) {
console.log(err);
}
});
```
在目标页面的`onLoad`生命周期方法中,可以通过`options`对象获取传递过来的参数。示例如下:
```javascript
// 目标页面的onLoad方法中获取参数
onLoad: function(options) {
console.log(options.param1); // 输出:value1
console.log(options.param2); // 输出:value2
}
```
在跳转时,将参数拼接在`url`中,使用`key=value`的形式进行传递。在目标页面的`onLoad`方法中,通过`options`对象获取参数的值。
相关问题
uniapp 跳转页面并携带多个参数
可以通过uniapp中的`uni.navigateTo`或者`uni.redirectTo`方法来跳转页面并携带多个参数,具体步骤如下:
1. 在当前页面中使用`uni.navigateTo`或者`uni.redirectTo`方法跳转到目标页面,例如:
```
uni.navigateTo({
url: '/pages/target/target'
})
```
2. 在目标页面的`onLoad`方法中获取跳转时携带的参数,例如:
```
onLoad: function(options) {
console.log(options.param1) // 获取参数param1
console.log(options.param2) // 获取参数param2
}
```
3. 在跳转时携带参数,例如:
```
uni.navigateTo({
url: '/pages/target/target?param1=value1¶m2=value2'
})
```
其中,`param1`和`param2`是自定义的参数名,`value1`和`value2`是参数对应的值。通过`&`符号来连接多个参数。
uniapp带参数跳转
在 uniapp 中,可以使用 `uni.navigateTo()` 方法带参数跳转到目标页面。步骤如下:
1. 在原页面中使用 `uni.navigateTo()` 方法跳转到目标页面,并通过 `query` 参数传递参数。例如:
```
uni.navigateTo({
url: '/pages/target/target?name=' + encodeURIComponent(name) + '&age=' + age
});
```
在上面的代码中,我们使用 `encodeURIComponent()` 对参数进行编码,以避免传递的参数中包含特殊字符导致跳转失败。
2. 在目标页面的 `onLoad()` 中获取传递的参数,并进行相应的处理。例如:
```
onLoad(options) {
let name = decodeURIComponent(options.name);
let age = parseInt(options.age);
// TODO: 进行相应的处理
}
```
在上面的代码中,我们使用 `decodeURIComponent()` 对传递的参数进行解码,并使用 `parseInt()` 将 `age` 参数转换为整型。
需要注意的是,如果需要传递多个参数,可以在 URL 中使用 `&` 符号进行连接。如果需要传递的参数较多,可以考虑使用对象进行传递,例如:
```
uni.navigateTo({
url: '/pages/target/target',
query: {
name: name,
age: age,
// TODO: 其他参数
}
});
```
在目标页面中,可以通过 `options.query` 获取传递的参数。例如:
```
onLoad(options) {
let name = options.query.name;
let age = parseInt(options.query.age);
// TODO: 进行相应的处理
}
```
以上是在 uniapp 中带参数跳转的方法,希望对你有帮助。