uni-app如何实现页面跳转并传递参数

在uni-app中实现页面跳转并传递参数，通常使用uni.navigateTo或uni.redirectTo方法。下面是一个具体的代码示例，展示了如何实现这一功能。

使用uni.navigateTo实现页面跳转并传递参数

假设我们有两个页面：page1和page2。在page1中，我们有一个按钮，点击后会跳转到page2并传递一些参数。

page1.vue

<template>
  <view>
    <button @click="navigateToPage2">跳转到Page2并传递参数</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2?param1=value1&param2=value2',
        success: function(res) {
          console.log('跳转成功');
        },
        fail: function(err) {
          console.error('跳转失败', err);
        }
      });
    }
  }
}
</script>

page2.vue

在page2中，我们需要接收这些参数。可以使用onLoad生命周期函数来获取传递过来的参数。

<template>
  <view>
    <text>参数1: {{ param1 }}</text>
    <text>参数2: {{ param2 }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      param1: '',
      param2: ''
    };
  },
  onLoad(options) {
    // options 对象包含了传递过来的参数
    this.param1 = options.param1;
    this.param2 = options.param2;
  }
}
</script>

使用uni.redirectTo实现页面跳转并传递参数

uni.redirectTo的用法与uni.navigateTo类似，区别在于redirectTo不会保留当前页面，而是替换当前页面。

修改page1.vue中的方法

navigateToPage2() {
  uni.redirectTo({
    url: '/pages/page2/page2?param1=value1&param2=value2',
    success: function(res) {
      console.log('跳转成功');
    },
    fail: function(err) {
      console.error('跳转失败', err);
    }
  });
}

总结

以上示例展示了如何在uni-app中实现页面跳转并传递参数。使用uni.navigateTo可以在导航栈中保留当前页面，而uni.redirectTo则会替换当前页面。在目标页面中，通过onLoad生命周期函数的options参数可以获取传递过来的数据。这些方法是实现页面间数据传递的常用手段。