URLSearchParams点击按钮在地址栏追加参数

利用URLSearchParams在JavaScript中动态追加和控制查询参数,

最新推荐文章于 2024-12-10 22:58:09 发布

原创最新推荐文章于 2024-12-10 22:58:09 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #服务器

hooks 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用URLSearchParams对象来处理URL查询参数，演示了如何在点击事件中追加新参数，并通过`history.replaceState`方法更新浏览器历史记录。同时，提到如何避免重复添加特定参数。

URLSearchParams

每次点击都会追加参数

 const handleAddParamClick = () => {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.append("newParam1", "newValue"); //追加一个参数
    urlParams.append("newParam2", "newValue2");//追加两个个参数
    
    window.history.replaceState({}, '', `${window.location.pathname}?${urlParams}`)
  }
  <Button onClick={handleAddParamClick}>追加参数</Button>