笔记大全

uniapp怎么跳转页面传值

更新时间：2023-07-05

1. 通过URL参数传值

// 发送方  --- 页面A
uni.navigateTo({
  url: '/pages/pageB/pageB?id=' + id
});

// 接收方 --- 页面B
onLoad: function(options) {
  console.log(options.id);  // 输出传递的id参数
}

通过URL参数传值是一种简单直接的方式。在发送方通过`uni.navigateTo`或`uni.redirectTo`方法跳转页面时，将页面B的URL中拼接参数，接收方通过`onLoad`获取参数。这种方式适用于传递简单的数据。

2. 使用vuex全局状态管理

// 发送方 --- 页面A
import {mapState} from 'vuex';

export default {
  computed: {
    ...mapState(['id'])
  },
  methods: {
    jumpPageB() {
      this.$store.commit('setId', this.id);
      uni.navigateTo({
        url: '/pages/pageB/pageB'
      });
    }
  }
}

// 接收方 --- 页面B
import {mapState} from 'vuex';

export default {
  computed: {
    ...mapState(['id'])
  },
  onLoad: function() {
    console.log(this.id);  // 输出全局状态中的id
  }
}

使用vuex全局状态管理是一种常用的方式，适用于需要在多个页面间共享数据的情况。发送方通过`this.$store.commit`将数据存储在全局状态中，接收方通过`this.$store.state`获取全局状态中的数据。

3. 使用uni-app提供的事件总线

// 发送方 --- 页面A
export default {
  methods: {
    jumpPageB() {
      uni.$emit('sendValue', id);  // 发送事件及数据
      uni.navigateTo({
        url: '/pages/pageB/pageB'
      });
    }
  }
}

// 接收方 --- 页面B
export default {
  onLoad: function() {
    uni.$on('sendValue', (id) => {  // 监听事件并接收数据
      console.log(id);
    });
  }
}

使用uni-app提供的事件总线是一种解耦的方式，适用于较为复杂的场景。发送方通过`uni.$emit`发送事件及数据，接收方通过`uni.$on`监听事件并接收数据。

4. 使用uni-app的全局变量

// 发送方 --- 页面A
export default {
  methods: {
    jumpPageB() {
      uni.setStorageSync('id', id);  // 存储全局变量
      uni.navigateTo({
        url: '/pages/pageB/pageB'
      });
    }
  }
}

// 接收方 --- 页面B
export default {
  onLoad: function() {
    console.log(uni.getStorageSync('id'));  // 获取全局变量
  }
}

使用uni-app的全局变量是一种简单的方式，适用于需要在跳转页面间传递数据的场景。发送方通过`uni.setStorageSync`存储全局变量，接收方通过`uni.getStorageSync`获取全局变量。

总结

在uniapp中，实现页面间传值的方式多种多样。通过URL参数传值简单直接，适用于传递简单的数据；使用vuex全局状态管理适用于需要在多个页面间共享数据的情况；使用uni-app提供的事件总线适用于较复杂的场景，实现解耦；使用uni-app的全局变量简单便捷，适用于跳转页面间传递数据。根据不同的需求和场景，选择合适的方式来实现页面间的数据传递。

c语言编程笔录