uniapp 页面跳转并带回数据

在 uniapp 开发中，页面跳转并带回数据是一项非常常见且重要的功能。它能极大地提升用户体验和应用的交互性。

我们来了解一下 uniapp 中常用的页面跳转方式。使用 uni.navigateTo 可以保留当前页面，跳转到应用内的某个页面。语法如下：

uni.navigateTo({
  url: '/pages/second/second?id=1&name=test',
  success: function(res) {
    // 接口调用成功的回调函数
  },
  fail: function(res) {
    // 接口调用失败的回调函数
  },
  complete: function(res) {
    // 接口调用结束的回调函数（调用成功、失败都会执行）
  }
});

在上述代码中，通过 url 传递了参数 id 和 name，跳转到 second 页面。

接下来，在目标页面如何接收这些数据呢？在目标页面的 onLoad 生命周期函数中可以获取传递过来的参数。例如：

export default {
  data() {
    return { }
  },
  onLoad: function(options) {
    console.log(options.id);
    console.log(options.name);
  }
}

这样就能顺利获取到从上个页面传递过来的数据了。

如果需要在页面跳转并带回数据，也就是返回上一个页面时传递数据，可以使用 uni.navigateBack 结合事件总线或 vuex 等方式来实现。

一种简单的方式是通过事件总线。首先创建一个全局的事件总线对象：

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

在需要返回数据的页面：

import { eventBus } from '@/utils/eventBus.js';
export default {
  data() {
    return { dataToSend: '这是要带回的数据' };
  },
  methods: {
    goBack() {
      eventBus.$emit('dataFromChild', this.dataToSend);
      uni.navigateBack();
    }
  }
}

在接收数据的页面：

import { eventBus } from '@/utils/eventBus.js';
export default {
  data() {
    return { receivedData: '' };
  },
  created() {
    eventBus.$on('dataFromChild', (data) => {
      this.receivedData = data;
    });
  }
}

通过这种方式，就能实现 uniapp 页面跳转并带回数据，为应用的交互提供了更多的灵活性和可能性，满足多样化的业务需求。