uniapp中的页面传参方式比较：query参数、state参数详解

# 1. 介绍

在uniapp开发中，页面传参是一个非常常见且重要的操作。通过页面传参，我们可以在不同页面之间传递数据，实现页面间的数据交互，是uniapp开发中必不可少的步骤。本章节将介绍页面传参的概念以及在uniapp中的重要性。

# 2. query参数

在uniapp开发中，query参数是一种常用的页面传参方式。接下来我们将深入探讨query参数的相关内容。

# 3. state参数

在uniapp开发中，state参数是另一种常用的页面传参方式。与query参数不同的是，state参数是将传递的参数存储在目标页面的状态中，可以在目标页面的data中直接获取参数数值，而无需通过页面路径解析来获取参数。

#### 1. 什么是state参数
State参数是将页面跳转时需要传递的数据，保存在目标页面的状态中。简单来说，就是将数据暂时存储在目标页面的状态中，可以方便地在目标页面中进行获取和操作。

#### 2. 如何在uniapp中使用state参数进行页面传参
在uniapp中，可以通过uni.navigateTo或uni.redirectTo方法传递state参数，示例如下：

// 在A页面跳转至B页面，并传递state参数
uni.navigateTo({
    url: 'pages/B/B',
    animationType: 'pop-in',
    animationDuration: 200,
    // 传递state参数
    success: (res) => {
        res.eventChannel.emit('acceptDataFromA', { data: '这是传递的state参数' });
    }
});

在B页面中接收state参数的示例代码如下：

// 页面加载时执行
onLoad: function (options) {
    // 创建eventChannel对象，用于接收参数
    this.pageData = this.getOpenerEventChannel();
    // 监听acceptDataFromA事件，获取传递的state参数
    this.pageData.on('acceptDataFromA', (data) => {
        console.log(data); // 这里输出的是传递的state参数
    });
}

#### 3. state参数相对于query参数的优势和使用场景