轻松驾驭uniapp页面跳转传值，玩转数据传递

2023-01-15 17:48:03

Uniapp页面跳转传值指南：实现数据共享交互

在Uniapp开发中，页面跳转传值是不可或缺的操作，它允许你在不同页面之间传递数据，实现数据的共享与交互。本文将全面解析Uniapp页面跳转传值，助你高效提升开发能力。

准备工作

环境配置： 确保已配置好Uniapp开发环境。
新建页面： 在项目中新建一个页面，命名为"page1"。
初始化数据： 在"page1"的created生命周期函数中，初始化数据对象。

export default {
  data() {
    return {
      message: 'Hello uniapp!'
    }
  }
}

页面跳转

按钮跳转： 在"page1"添加一个按钮，设置点击事件。
参数传递： 在按钮点击事件中，使用uni.navigateTo方法跳转到"page2"，同时将数据对象作为参数传递。

uni.navigateTo({
  url: '/pages/page2/page2',
  query: {
    message: this.message
  }
})

接收传值

获取数据： 在"page2"的onLoad生命周期函数中，获取从"page1"传递过来的数据。

export default {
  onLoad(options) {
    this.message = options.message
  },
  data() {
    return {
      message: ''
    }
  }
}

使用数据： 现在，你可以在"page2"中使用this.message变量来获取从"page1"传递过来的数据。

案例演示

以一个简单的示例，展示页面跳转传值的使用。在"page1"，点击按钮，将消息传递给"page2"，并在"page2"中显示该消息。

// page1.vue
export default {
  data() {
    return {
      message: 'Hello uniapp!'
    }
  },
  methods: {
    navigateToPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2',
        query: {
          message: this.message
        }
      })
    }
  }
}

// page2.vue
export default {
  onLoad(options) {
    this.message = options.message
  },
  data() {
    return {
      message: ''
    }
  }
}