如何从重定向的 url 获取查询数据

Question

我有一个卡支付返回一个重定向 URL 的响应。我必须在支付初始化后重定向用户。 我这样做使用：

...
 window.location.href = response.data.meta.authorization.redirect

要在我无法控制的页面上验证付款。

验证后，我的请求中有一个重定向 URL，它将用户重定向（浏览器重定向）到我的应用程序，查询数据如下所示：

http://account.localhost.com/deposit/card?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"...,

我需要 url 中的 ID 来验证付款并随后更新我的数据库。

我怎样才能用 Vue 做到这一点？

Answer 1

您可以使用URL API检索response参数中的 json，然后解析它并从结果 object 中获取 ID。

 const str = `http://account.localhost.com/depositcard?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"%7D` const json = new URL(str).searchParams.get('response') const obj = JSON.parse(json) console.log(obj.id)

Answer 2

使用 Vue-router，您可以使用this.$route.query获取查询参数，然后访问特定参数： this.$route.query.id

由于 ID 在字符串化的 JSON object 中，您必须先解析它： JSON.parse(this.$route.query.response).id

因此，通过重定向，访问created的生命周期挂钩中的数据是有意义的：

created() {
    console.log(JSON.parse(this.$route.query.response).id);
}