如何使用Javascript将查询参数附加到URL？

我正在构建一个web应用程序，我正在使用Firebase将我的用户数据存储在云Firestore中。我的web应用程序上有一个页面，允许用户从Cloud Firestore查看他们的文档。我想在view.html上的URL末尾添加一个查询参数，这样我就可以获取该查询参数值并使用它搜索文档

我一直在网上寻找可能的解决办法。到目前为止，我遇到了一些关于这个主题的视频，但它们并没有深入到我一直需要的深度。例如，显示了如何从URL添加和获取查询参数，但它只显示了如何在控制台中记录这些更改。我如何将其设置为我的URL

我也在浏览Stackoverflow以寻找解决方案。但是，如果询问类似的问题，答案中的许多解决方案会导致view.html在循环中重新加载。为什么会这样，如果这是一个可能的解决方案，我将如何阻止这种情况发生

---

我如何在Javascript中添加和获取URL查询参数？

您说要在Javascript中执行此操作，因此我假设页面本身正在构建/修改指向页面上任意位置的链接，或者直接通过Javascript转到

浏览器中的javascript中有一个对象，它可以构建和分解URL

let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");

在任何情况下，一旦有了URL对象，就可以访问它的各个部分来读取和设置值

添加查询参数使用URL的属性，您可以在该属性中添加参数，而无需担心如何管理？而且&…这个方法会帮你解决这个问题

thisPage.searchParams.append('yourKey', 'someValue');

这将在此页面上演示，添加搜索参数并在每个步骤显示URL：

let here=new URLwindow.location.href； console.loghere； searchParams.append'firstKey'，'theValue'； console.loghere； here.searchParams.append'key2'，'other'；

---

console.loghere 我用最简单的方法解决了这个问题。我忘记了我可以通过在URL中添加搜索参数链接到view.html。以下是我所做的：

在index.html上链接到view.html，我创建了函数openViewer；。我将参数添加到URL href的末尾

function openViewer() {
     window.location.href = `view.html?id={docId}`;
}

然后在view.html上，我使用URLSearchParameters获得参数，如下所示：

---

该页面的新URL现在是www.mysite.com/view.html？id=mydocid。

它是什么类型的应用程序？你在使用框架吗？@AluanHaddad这是一个使用HTML、CSS和Javascript的标准web应用程序。我使用的唯一框架是jQuery和Firebase SDK。我只是为了学习而坚持使用香草Javascript，这就是为什么我在问题中特别要求使用JS解决方案的原因。我是网络开发新手，所以我尽可能多地了解基本知识。听到这个消息很高兴。太多的人从极其复杂的事情开始，比如Angular，而从来没有正确地学习JavaScript。我之所以这么问，是因为许多框架都集成了客户端路由，您需要了解它们的行为并加以利用。使用searchParams添加参数是有效的，并且新的URL已成功地使用其搜索参数登录到控制台中。然而，我仍然不确定我问题的第二部分：我如何使带有搜索参数的URL成为页面的URL，而不仅仅是将其登录到控制台。我在这里尝试了window.location.href=但是页面只是陷入无限重循环，将参数添加到URL，直到我断开与页面的连接。@m_de41-我怀疑无限循环是由于代码的调用方式造成的。。。页面加载时？当用户做某事时。。。但您根本不显示任何代码，因此无法判断。

const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');

console.log(id)