Vue2 微信小程序：页面间传递数组

Vue2 微信小程序：页面间传递数组

你想在Vue2 语法开发的微信小程序 中，把当前页面的数组数据，通过页面跳转传递到下一个页面并使用，我给你整理了最常用、最稳定的3种方案，直接复制就能用。

---

核心前提

微信小程序原生路由不支持直接传递复杂类型（数组/对象），必须先转成 JSON 字符串。

---

方案1：路由传参（最常用、推荐）

第一步：上一个页面（传递数据）

<template>
  <button @click="goNextPage">跳转到下一页</button>
</template>

<script>
export default {
  data() {
    return {
      // 要传递的数组
      list: [1, 2, 3, { name: "测试" }]
    };
  },
  methods: {
    goNextPage() {
      // 数组转 JSON 字符串
      const data = JSON.stringify(this.list);
      
      // 路由跳转（navigateTo/redirectTo 都可以）
      uni.navigateTo({
        url: `/pages/next/next?list=${data}`
      });
    }
  }
};
</script>

第二步：下一个页面（接收数据）

<script>
export default {
  onLoad(options) {
    // 1. 获取路由字符串
    const str = options.list;
    // 2. 转回数组
    const newList = JSON.parse(str);
    
    console.log("接收的数组：", newList);
    this.list = newList;
  },
  data() {
    return {
      list: []
    };
  }
};
</script>

---

方案2：全局变量（适合跨多页面共享）

1. 在 main.js 或 App.vue 定义全局数据

Vue.prototype.$globalData = {
  list: []
};

2. 上一页存入数据

goNextPage() {
  // 存入全局
  this.$globalData.list = this.list;
  uni.navigateTo({
    url: "/pages/next/next"
  });
}

3. 下一页直接取用

onLoad() {
  this.list = this.$globalData.list;
}

---

方案3：事件总线 EventBus（适合灵活通信）

1. 定义 eventBus.js

import Vue from 'vue'
export default new Vue()

2. 上一页发送

import bus from '@/utils/eventBus'

goNextPage() {
  bus.$emit('sendList', this.list);
  uni.navigateTo({ url: '/pages/next/next' });
}

3. 下一页接收

import bus from '@/utils/eventBus'

onLoad() {
  bus.$once('sendList', (res) => {
    this.list = res;
  });
}

---

推荐选择

✅ 小数组、简单传递 → 用 方案1 路由传参

✅ 多页面共享、大数据 → 用 方案2 全局变量

✅ 需要灵活通信 → 用 方案3 事件总线

---

总结

1. 路由传数组必须 JSON.stringify + JSON.parse
2. 最推荐：路由直接传参，简单无依赖
3. 大数据/多页面用 全局变量 更稳定

需要我给你写一个完整可运行的 demo 页面吗？直接复制到项目就能跑。