uniapp不同页面传参

前言

在UniApp开发中，页面间的数据传递是非常常见的需求。UniApp提供了多种方式来实现不同页面之间的参数传递，包括路由跳转和全局变量等。下面将介绍一些常用的方法，以及它们的用途和规范。

路由跳转传参

在UniApp中，我们可以使用uni.navigateTo或uni.redirectTo等路由跳转方法来实现页面间的导航。在进行路由跳转时，可以通过URL参数或query参数的形式传递数据。

// 页面A跳转到页面B并传递参数
uni.navigateTo({
  url: '/pages/pageB/pageB?id=123&name=uniapp'
});

在目标页面的onLoad生命周期中，我们可以通过this.$route.query来获取传递的参数：

onLoad() {
  console.log(this.$route.query.id);  // 输出：123
  console.log(this.$route.query.name);  // 输出：uniapp
}

全局变量传参

除了路由跳转，我们还可以使用UniApp的全局变量来实现页面间的数据传递。UniApp提供了vue prototype上的方法$store，我们可以使用它来存储和获取全局数据。

// 页面A设置全局变量
this.$store.state.id = 123;
this.$store.state.name = 'uniapp';

在页面B中，我们可以通过this.$store.state来获取已设置的全局变量：

console.log(this.$store.state.id);  // 输出：123
console.log(this.$store.state.name);  // 输出：uniapp

总结

通过路由跳转和全局变量传参是UniApp中常用的方法。路由跳转传参适用于需要从页面A直接跳转到页面B，并携带参数的情况，而全局变量传参适用于在整个应用中多个页面间共享数据的场景。使用这些方法传参时，需要遵循统一的规范，确保数据传递的准确和可靠。