向 URL 反应路由器添加参数 - JavaScript

在 JavaScript 中，可以通过向 URL 添加参数来向反应路由器发送数据。本文将介绍如何使用 JavaScript 向 URL 添加参数，并向您展示一些实用示例。

向 URL 添加参数

在 JavaScript 中，我们可以使用 URLSearchParams 对象来添加参数。

let params = new URLSearchParams(window.location.search);
params.append('key', 'value');

在上面的示例中，我们首先创建一个 URLSearchParams 对象，并将当前 URL 中的参数存储在该对象中。然后，我们使用 append() 方法向参数中添加新参数。我们可以在上面的代码中设置任意的参数名和值。

获取 URL 参数

我们可以使用 URLSearchParams 对象来获取 URL 中的参数。

let params = new URLSearchParams(window.location.search);
let value = params.get('key');

在上面的示例中，我们首先创建一个 URLSearchParams 对象，并在其中存储当前 URL 中的参数。然后，我们可以使用 get() 方法从该对象中获取指定参数的值。

将参数添加到 URL 中的其他路由

在某些情况下，我们可能需要将参数添加到 URL 中的其他路由。为此，我们可以使用 JavaScript 中的字符串连接符来拼接 URL。

let params = new URLSearchParams(window.location.search);
let newValue = 'new value';
let newUrl = 'https://example.com/' + '?key=' + newValue;
window.location.href = newUrl;

在上面的示例中，我们首先创建一个 URLSearchParams 对象，并将当前 URL 中的参数存储在该对象中。然后，我们创建一个新的 URL，并在其中添加参数。最后，我们使用 window.location.href 将用户重定向到该 URL。

删除 URL 中的参数

我们可以使用 delete() 方法来删除 URL 中的参数。

let params = new URLSearchParams(window.location.search);
params.delete('key');

在上面的示例中，我们首先创建一个 URLSearchParams 对象，并将当前 URL 中的参数存储在该对象中。然后，我们可以使用 delete() 方法从该对象中删除指定的参数。

结论

使用 JavaScript 在 URL 中添加参数可以让我们轻松向反应路由器发送数据。无论您是想添加、删除还是获取参数，本文中的示例代码都可以帮助您完成任务。如果您想了解更多关于 JavaScript 和 URLSearchParams 对象的信息，请参阅 Mozilla 的官方文档。