在uniapp中,常见的页面传参方式有以下几种:

  1. URL传参

可以在跳转页面时,在url中添加参数,通过在目标页面的onLoad函数中的options参数获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({url: '/pages/targetPage/index?id=123&name=test'});

在目标页面中:

onLoad: function(options) {console.log(options.id);console.log(options.name);}
  1. Vuex状态管理

可以在源页面设置一个state,然后在目标页面中获取该state的值。示例代码如下:

在源页面中:

this.$store.state.id = 123;this.$store.state.name = 'test';uni.navigateTo({url: '/pages/targetPage/index'});

在目标页面中:

computed: {id: function() {return this.$store.state.id;},name: function() {return this.$store.state.name;}}
  1. uni传参

可以在源页面使用uni对象的navigateTo方法传参,在目标页面中使用uni对象的getOpenerEventChannel方法获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({url: '/pages/targetPage/index',success: function(res) {var channel = uni.getOpenerEventChannel();channel.emit('passData', {id: 123, name: 'test'});}});

在目标页面中:

onLoad: function() {var _this = this;var channel = uni.getOpenerEventChannel();channel.on('passData', function(data) {_this.id = data.id;_this.name = data.name;});}

其中,emit方法用于向目标页面传递数据,on方法用于监听由emit方法传递过来的数据。