uniapp vue2 routing, global, Vuex parameter passing

In uni-app, navigateTowhen using redirection, simple data can be passed in the form of URL parameters, but it is not recommended to pass objects directly through the URL. This is because URL parameters have a length limit and require objects to be serialized and deserialized. Instead, you can pass objects through global variables, Vuex, or custom events.

Simple example here, showing how to pass objects using global variables in uni-app:

1. Routing parameters

Serialize the object to a JSON string, then parse it on the receiving page. Note, however, that this approach may suffer from URL length limitations, and errors may occur when parsing.

Here's an example of passing an object using routing:

send page

On the sending page, JSON.stringify()serialize the object into a JSON string and pass it as a URL parameter using:

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

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

receive page

onLoadIn the lifecycle hook of the receiving page , JSON.parse()parse the JSON string into an object using:

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

 This method works in simple cases, but be aware that you may run into problems if you try to pass large objects or objects containing special characters. Additionally, an error will be thrown if the object contains circular references JSON.stringify().

While it is possible to pass serialized objects through routes, this approach may not be best practice. Use with caution and be sure to test adequately in your application.

2. Before jumping to the page, store the object in a global variable

In src/main.jsthe file, initialize an empty object to be used as a global variable:

Vue.prototype.$globalData = {};

On the sending page, store the object in a global variable and execute navigateTo:

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

    this.$globalData.exampleObject = exampleObject;

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

Get the object in the receiving page

On the receiving page, objects in global variables can be obtained through onLoador onShowlifecycle hooks:

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

This way, when jumping to a page, you can store the object into a global variable and get it easily in the receiving page. But be aware that global variables can mess up data, especially in complex applications. Therefore, for larger projects, it is recommended to use Vuex to manage state.

3. An example of using Vuex to pass objects:

1. First, storecreate a file in the folder called index.js(if not already created).
2. In index.jsthe file, initialize the Vuex store:

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. On the sending page, store the object in the Vuex storage and execute navigateTo: 

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

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

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

4. On the receiving page, get the object from the Vuex storage:

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

 Use Vuex to better manage state and pass data across pages. Choose the appropriate method based on your project needs.