uniapp vue2 路由、全局、Vuex传参

在uni-app中，使用navigateTo跳转时，可以通过URL参数的形式传递简单的数据，但是不建议通过URL直接传递对象。这是因为URL参数有长度限制，并且需要对对象进行序列化和反序列化。相反，您可以通过全局变量、Vuex或自定义事件来传递对象。

这里简单的示例，展示了如何在uni-app中使用全局变量传递对象：

一、路由传参

将对象序列化为JSON字符串，然后在接收页面上解析它。但请注意，这种方法可能会受到URL长度限制的影响，并且在解析时可能出现错误。

以下是使用路由传递对象的示例：

发送页面

在发送页面，使用JSON.stringify()将对象序列化为JSON字符串，并作为URL参数传递：

methods: {
  goToDetails() {
    const exampleObject = {
      name: "John",
      age: 30,
      city: "New York",
    };

    uni.navigateTo({
      url: '/pages/details/index?data=' + JSON.stringify(exampleObject),
    });
  },
},

接收页面

在接收页面的onLoad生命周期钩子中，使用JSON.parse()将JSON字符串解析为对象：

export default {
  data() {
    return {
      exampleObject: null,
    };
  },
  onLoad(options) {
    if (options.exampleObject ) {
      this.exampleObject = JSON.parse(decodeURIComponent(options.exampleObject));
    }
  },
};

 这个方法在简单的情况下可以工作，但请注意，如果您尝试传递大型对象或包含特殊字符的对象，可能会遇到问题。此外，如果对象中包含循环引用，JSON.stringify()将会抛出错误。

虽然可以通过路由传递序列化后的对象，但这种方法可能不是最佳实践。请谨慎使用，并确保在应用程序中进行充分测试。

二、跳转页面前，将对象存储到全局变量

在src/main.js文件中，初始化一个空对象用作全局变量：

Vue.prototype.$globalData = {};

在发送页面，将对象存储到全局变量，并执行navigateTo：

methods: {
  goToDetails() {
    const exampleObject = {
      name: "John",
      age: 30,
      city: "New York",
    };

    this.$globalData.exampleObject = exampleObject;

    uni.navigateTo({
      url: "/pages/details/index",
    });
  },
},

在接收页面中获取对象

在接收页面，可以通过onLoad或onShow生命周期钩子获取全局变量中的对象：

export default {
  data() {
    return {
      exampleObject: null,
    };
  },
  onLoad() {
    if (this.$globalData.exampleObject) {
      this.exampleObject = this.$globalData.exampleObject;
    }
  },
};

这样，在跳转页面时，您可以将对象存储到全局变量中，并在接收页面中轻松获取它。但请注意，全局变量可能会导致数据混乱，特别是在复杂应用程序中。因此，对于更大的项目，建议使用Vuex来管理状态。

三、使用Vuex传递对象的示例：

1. 首先，在store文件夹中创建一个名为index.js的文件（如果尚未创建）。
2. 在index.js文件中，初始化Vuex存储：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    exampleObject: {},
  },
  mutations: {
    setExampleObject(state, payload) {
      state.exampleObject = payload;
    },
  },
});

3.在发送页面，将对象存储到Vuex存储中，并执行navigateTo： 

methods: {
  goToDetails() {
    const exampleObject = {
      name: "John",
      age: 30,
      city: "New York",
    };

    this.$store.commit("setExampleObject", exampleObject);

    uni.navigateTo({
      url: "/pages/details/index",
    });
  },
},

4.在接收页面，从Vuex存储中获取对象：

export default {
  data() {
    return {
      exampleObject: null,
    };
  },
  onLoad() {
    this.exampleObject = this.$store.state.exampleObject;
  },
};

 使用Vuex可以更好地管理状态和跨页面传递数据。根据您的项目需求选择适当的方法。