Vue页面跳转传递对象

在Vue中传递对象可以通过路由参数进行传递。可以使用$route对象，里面有许多属性，包含的信息包括页面路径（path）、参数（params）等。

以下是在Vue中实现页面跳转传递对象的示例代码：

在跳转之前，将需要传递的对象序列化成字符串，并设置为路由参数params的值：

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

在接收页面，通过$route对象获取路由参数params，并将其解码并反序列化以获取原始对象：

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

这里使用了JavaScript内置的`btoa()`和`atob()`函数对对象进行序列化并编码和解码。

注意，这种方法可以用于在Vue应用程序的不同页面之间传递简单的JSON格式对象。对于更复杂的对象，可能需要更多的处理和验证，以确保跨页面正确传递数据。

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！