在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",
    });
  },
},

在接收页面中获取对象

在接收页面,可以通过onLoadonShow生命周期钩子获取全局变量中的对象:

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可以更好地管理状态和跨页面传递数据。根据您的项目需求选择适当的方法。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐