history.pushState实现无页面刷新的原理及问题排查：调用该方法修改URL后页面未自动更新

Hey there! Let's tackle your two questions one by one—first how history.pushState skips page reloads, then why your content isn't updating when you change the URL.

The traditional way of changing a URL (like clicking a regular link) tells the browser to send a new request to the server, which responds with an entirely new HTML page—hence the full reload.

history.pushState is part of the HTML5 History API, and it works differently:

• It only adds a new entry to the browser's session history stack (the list of pages you've visited in the current tab).
• It updates the address bar to show the new URL, but it doesn't trigger any network requests to the server.
• It doesn't reload the page because it's just modifying the browser's internal history state, not initiating a full navigation. Think of it as "tricking" the browser into thinking you've navigated to a new page without actually fetching new content.

Here's the key thing: history.pushState only changes the URL and history record—it doesn't automatically update your page content. The browser has no idea what content should correspond to the new URL; that logic is entirely up to you to implement.

Looking at your code, your change_url function only calls history.pushState—there's no code to actually swap out the page content. To fix this, you need to add logic to update the content whenever you change the URL.

Modified code example #

First, update your change_url function to trigger content updates, and add a helper function to handle the content swap:

function change_url(url) {
  // Update the history and URL first
  history.pushState(null, null, url);
  
  // Now manually update the page content based on the new URL
  updatePageContent(url);
}

function updatePageContent(url) {
  // Replace this with your actual content update logic
  const mainContent = document.getElementById('main-content');
  
  if (url === '/') {
    mainContent.innerHTML = `
      <h1>Main Page</h1>
      <p>Welcome back to the home screen!</p>
    `;
  } else if (url === '/parts/') {
    mainContent.innerHTML = `
      <h1>Parts Section</h1>
      <p>Check out all our available parts here.</p>
    `;
  }
  
  // If you need to load content asynchronously (like fetching from a server), use fetch:
  // fetch(url)
  //   .then(res => res.text())
  //   .then(html => mainContent.innerHTML = html);
}

Handle browser back/forward buttons #

You'll also want to update content when the user clicks the browser's forward/back buttons. These actions trigger the popstate event, so add a listener for that:

window.addEventListener('popstate', () => {
  // Use the current URL to update content when navigating history
  updatePageContent(window.location.pathname);
});

Don't forget your HTML structure #

Make sure your page has a container where you'll swap out content, like:

<div id="main-content">
  <!-- Your default content here -->
</div>

<button onclick="change_url('/');" class="btn btn-primary dim btn-dim" id="btn-main" type="button">
  <i class="fas fa-home"> </i> main
</button>
<button onclick="change_url('/parts/');" class="btn btn-warning dim btn-dim" type="button">
  <i class="fas fa-grip-horizontal"> </i> parts
</button>

To recap: pushState manages the URL and history, but you have to write the code to update the page content to match the new URL—whether that's swapping out DOM elements, fetching new content, or something else.

内容的提问来源于stack exchange，提问作者artiest