Vue路由跳转如何传递一个对象过去？-白红宇

Vue路由跳转如何传递一个对象过去？

阅读量：686 次

发布时间：2019-03-17

本文共 1018 字，大约阅读时间需要 3 分钟。

正确的数据传输方法

在开发过程中，当你需要将复杂的数据对象进行传输时，直接使用 JSON.stringify() 和 JSON.parse() 并不会奏效，因为解析时会报错。以下是解决问题的详细步骤：

字符串编码和解码：在传输过程中，使用 encodeURIComponent() 对 JSON.stringify() 转换后的字符串进行编码，确保数据不会被破坏。例如：

const data = { id: 123, name: "Example Data" };const jsonData = JSON.stringify(data);const encodedData = encodeURIComponent(jsonData);

URL 中如 encodeURIComponent 的作用是替换不安全字符，如空格变成 %20，这确保数据不会改变。

URL 解码：接收端通过使用 decodeURIComponent() 来解码 URL 参数，再将其解析为 JSON 对象。例如：

const dataFromUrl = decodeURIComponent(window.location.search);const parsedData = JSON.parse(dataFromUrl);

这样可以恢复原始的 JSON 数据。

转换步骤示例：

发送端：

const data = { id: 123, name: "Test Data" };const jsonString = JSON.stringify(data);const encoded = encodeURIComponent(jsonstring);this.$router.push(`/details/${encoded}`);

接收端：

const urlParams = new URL(window.location.search);const data = JSON.parse(decodeURIComponent(urlParams.obj));

验证步骤：

查看 Network 调试器：确保传输的数据与期望的 JSON 格式一致。

控制台日志：检查解解析的数据结构是否正确，确认是否为预期对象。

通过以上方法，可以确保数据传输过程中的正确性，避免由于字符转换导致的错误。这样既能解决 JSON 解析问题，也保证了数据的完整性和可读性。

转载地址：http://dkthz.baihongyu.com/

你可能感兴趣的文章