在 js 中添加 URL 查询 - Javascript

当你需要在URL中添加查询参数时，Javascript可以提供你一种快速和便捷的方式。查询参数通常用于将信息传递到Web服务器或在前端之间共享信息。

以下是在Javascript中添加URL查询的步骤：

步骤1 - 获取当前URL

我们首先需要获取当前页面的URL。我们可以使用window.location.href获取当前URL:

let currentUrl = window.location.href;

步骤2 - 分解当前URL

一旦我们获取了当前的URL，我们需要将其分割成其组成部分，例如协议，主机名，路径等。我们可以使用window.location对象的属性来获取这些值。

以下是获取各个部分的代码：

let protocol = window.location.protocol; // "http:"
let hostname = window.location.hostname; // "www.example.com"
let path = window.location.pathname; // "/path"
let query = window.location.search; // "?search=test"
let hash = window.location.hash; // "#hash"

当您通过上面的代码片段运行时，多次测试以获得正确的结果。

步骤3 - 增加查询参数

现在，我们已经获取了当前的URL，因此接下来我们要增加查询参数。 我们可以通过在URL结尾处添加查询参数来完成此操作。

以下是如何使用Javascript添加查询参数的示例代码：

let newUrl = currentUrl + "?name=value";

在上面的代码中，我们简单地将查询参数添加到URL的结尾处。

步骤4 - 重定向到新URL

一旦我们添加了查询参数并获得了新的URL，我们需要将用户重定向到新的URL，以便他们可以看到添加的更改。

以下是如何使用Javascript重定向到新URL：

window.location.href = newUrl;

在上面的代码中，我们将window.location.href设置为新的URL，这将导致浏览器重定向到新的URL。

最终代码应如下所示：

let currentUrl = window.location.href;
let newUrl = currentUrl + "?name=value";
window.location.href = newUrl;

现在，当您运行上面的代码时，页面将重定向到包含查询参数的新URL。