uni-app的uni.navigateTo传参
时间: 2023-08-24 11:06:17 浏览: 156
在uni-app中,您可以使用uni.navigateTo方法进行页面跳转,并且可以传递参数给目标页面。以下是传递参数的步骤:
1. 在源页面,使用JavaScript对象或字符串等方式创建参数数据。
2. 在uni.navigateTo方法中,将参数数据作为query参数传递给目标页面。
下面是一个示例:
在源页面(例如`index.vue`)中:
```javascript
// 创建参数数据
var params = {
name: '张三',
age: 20
};
// 跳转到目标页面,并传递参数
uni.navigateTo({
url: 'targetPage?params=' + JSON.stringify(params)
});
```
在目标页面(例如`targetPage.vue`)中,可以通过`this.$route.query`来获取传递的参数:
```javascript
export default {
mounted() {
// 获取参数
var params = JSON.parse(this.$route.query.params);
// 使用参数数据
console.log(params.name); // 输出:张三
console.log(params.age); // 输出:20
}
}
```
在目标页面的`mounted`生命周期钩子函数中,可以通过`this.$route.query.params`获取传递的参数,并进行相应的处理。
请注意,传递参数时需要进行序列化和反序列化操作,以确保数据正确传递和解析。在示例中,使用JSON.stringify将参数对象序列化为字符串,在目标页面使用JSON.parse将字符串解析为对象。
希望能对您有所帮助!
阅读全文