Vue page jumps and passes objects

Passing objects in Vue can be passed through routing parameters. You can use the $route object, which contains many attributes, including page path (path), parameters (params), etc.

The following is a sample code for implementing page jump passing objects in Vue:

Before jumping, serialize the object to be passed into a string and set it as the value of the routing parameter params:

let obj = { name: "John", age: 30 };
let encodedObj = btoa(JSON.stringify(obj)); // 将对象序列化并编码为可读的字符串
this.$router.push({path: '/destination', params: {myObj: encodedObj}});

On the receiving page, get the route parameter params through the $route object, decode and deserialize it to get the original object:

mounted() {
  let encodedObj = this.$route.params.myObj;
  let obj = JSON.parse(atob(encodedObj)); // 解码并反序列化对象
  console.log(obj); // { name: "John", age: 30 }
}

Here, the built-in `btoa()` and `atob()` functions of JavaScript are used to serialize, encode and decode objects.

Note that this method can be used to pass simple JSON-formatted objects between different pages in a Vue application. For more complex objects, more processing and validation may be required to ensure data is passed correctly across pages.

Please like it if it is useful, and develop a good habit!

Please leave a message for questions, exchanges, and encouragement!