【Vue】在 Vue Router 中传递和解析对象数据

最新推荐文章于 2024-09-14 22:35:56 发布

冷酷女人8520

最新推荐文章于 2024-09-14 22:35:56 发布

阅读量547

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45968070/article/details/138124069

版权

当我们需要在不同页面之间传递对象数据时，通常会使用 Vue Router 的 this.$router.push 方法进行导航，并通过 query 参数传递数据。然而，直接传递对象会导致数据丢失或不正确解析的问题，因为对象不能直接被编码成 URL 查询参数形式。

为了解决对象数据传递和解析的问题，我们可以将对象先转换为字符串，并对字符串进行 URL 编码。在发送端，可以使用 JSON.stringify 方法将对象转换为字符串，然后使用 encodeURIComponent 函数对字符串进行编码。在接收端，使用 decodeURIComponent 函数对 URL 查询参数进行解码，并使用 JSON.parse 方法将字符串解析为对象。

// 发送端页面
this.$router.push({
  name: "Index",
  query: { data: encodeURIComponent(JSON.stringify(data)) }
});

// 接收端页面
const decodedData = JSON.parse(decodeURIComponent(this.$route.query.data));