如何在不使用 JavaScript 重新加载页面的情况下修改 URL？

方法一：用replaceState()替换当前状态 方法：浏览器的历史接口管理浏览器会话历史。它包括在当前页面所在的选项卡或框架中访问的页面。操纵此状态可用于更改浏览器的 URL，而无需重新加载页面。

replaceState()方法用于修改当前历史记录条目，并将状态的属性替换为传递参数中的属性。

该方法的参数有3部分，状态对象是关于状态的可序列化对象，标题是新状态的标题，URL是状态的新URL。

可以通过将所需的 URL 作为字符串传递给此方法来更改 URL。这将更改页面的 URL，而无需重新加载页面。

例子：

  

    
        How to modify URL without reloading
        the page using JavaScript?
    

  

    
        GeeksForGeeks
    
      
    
        How to modify URL without reloading
        the page using JavaScript?
    
      
    
        Click on the button below to modify
        the current history state
    
      
    
        Modify history state
    
      
    
        function modifyState() {
            let stateObj = { id: "100" };
            window.history.replaceState(stateObj,
                        "Page 3", "/page3.html");
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：使用 pushState() 添加新状态 方法： pushState()方法用于添加新的历史条目，其属性作为参数传递。这会将当前 URL 更改为给定的新状态，而无需重新加载页面。

该方法的参数分为三部分，状态对象是关于状态的可序列化对象，标题是状态的新标题，URL是状态的新URL。
可以通过将所需的 URL 作为字符串传递给此方法来更改 URL。这将更改页面的 URL，而无需重新加载页面。

例子：

  

    
        How to modify URL without reloading
        the page using JavaScript?
    

  

    
        GeeksForGeeks
    
      
    
        How to modify URL without reloading
        the page using JavaScript?
    
      
    
        Click on the button below to add
        a new history state
    
      
    
        Add history state
    
      
    
        function addState() {
            let stateObj = { id: "100" };
              
            window.history.pushState(stateObj,
                     "Page 2", "/page2.html");
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：