微信小程序页面传参乱码问题如何解决？

YG9082025-06-21 17:22

直接说答案：

在子页面的onLoad中直接解析：JSON.parse(decodeURIComponent(options.query))即可；

问题原因

路由传参机制：当您使用 this.$Router.push({ name: '...', params: { id: '...' }}) 进行跳转时，uni-simple-router 插件为了兼容不同端（特别是小程序端）的页面跳转，会将您传入的 params 对象自动转换为一个 JSON 字符串。

URL 编码：接着，它会将这个 JSON 字符串进行 URL 编码，然后像 query 参数一样拼接到页面的 URL 后面，例如 .../taskDetail?query=%7B%22id%22%3A%22...%22%7D。

onLoad 接收参数：因此，在详情页的 onLoad(options) 中，拿到的 options 对象，其 query 属性的值就是那段被编码后的字符串。

解决方法

我们需要做的就是对这个过程进行"逆向工程"：解码并解析。

解码：使用 decodeURIComponent() 方法，将编码后的字符串（如 %7B%22id...）解码回正常的 JSON 字符串（如 {"id":"..."}）。

解析：使用 JSON.parse() 方法，将这个 JSON 字符串解析成一个真正的 JavaScript 对象。

取值：从解析后的对象中，安全地取出您需要的 id。

例如：

我们将parent.vue 的跳转方法中传递id参数。

bash 复制代码

goToDetail(item) {
        let id = item.id;
        console.log('id',id);
        this.$Router.push({
            name: 'Detail',
            params: {
                    id: id
            }
        })
}

打印出id 是正确传给Detail详情页面的

在子页的onLoad接受id参数

js 复制代码

onLoad(options) {
  this.taskId = options.query;//这里收参都是query，不是父页面传的id
  console.log('taskId',this.taskId);
}

奇怪的是一串乱码，正确的写法：

js 复制代码

onLoad(options) {
      this.taskId = options.query;
      console.log('taskId',this.taskId);
        if (options.query) {
            try {
                    const query = JSON.parse(decodeURIComponent(options.query));
                    this.taskId = query.id;
            } catch (e) {
                    console.error('解析任务ID失败', e);
            }
        }
},

可以看到被正确解析父页传的id参数；