使用History API修改URL后页面刷新数据就丢失了怎么办？

我之前踩过这个坑，跟你情况一模一样。用 pushState 改 URL 是没问题的，但刷新页面时 JS 状态全没了，这本来就是正常的，毕竟 pushState 存的只是浏览器历史记录，不是应用状态。

核心思路是：状态得你自己在页面加载时恢复。你说的在 onload 里判断 pathname 其实没毛病，但可以做得更系统一点。

你应该在页面初始化的时候，就根据当前 URL 来还原状态。比如你跳转到了 /user/123，那刷新后就应该解析 pathname，提取出用户 ID，再去 fetch 数据。

你可以这样组织代码：

function loadUserFromPath(path) {

  const match = path.match(//user/(d+)/);

  if (match) {

    const userId = parseInt(match[1]);

    fetchUser(userId).then(user => {

      document.title = user.name;

      // 更新页面内容

      renderUserPage(user);

    });

  }

}



// 页面加载时尝试恢复状态

window.addEventListener('load', () => {

  loadUserFromPath(location.pathname);

});



// 点击按钮时

document.getElementById('loadBtn').addEventListener('click', () => {

  fetchUser(123).then(user => {

    document.title = user.name;

    renderUserPage(user);

    history.pushState({ userId: 123 }, '', '/user/123');

  });

});



// 处理前进后退

window.addEventListener('popstate', (event) => {

  if (event.state && event.state.userId) {

    fetchUser(event.state.userId).then(user => {

      document.title = user.name;

      renderUserPage(user);

    });

  } else {

    // 如果没有 state，还是得靠 URL

    loadUserFromPath(location.pathname);

  }

});

关键点是：无论从哪里进入页面（刷新、直接访问、前进后退），都要能从 URL 解析出状态。URL 才是唯一可信的来源。

顺便提醒一句，别指望 state 能持久化，它在刷新时本来就会丢。所以你的应用状态必须能通过 URL 还原，这才是单页应用的正确姿势。我当初也是想靠 state 撑全场，结果各种翻车，后来老老实实用 URL 驱动才稳下来。

你这问题太常见了，单页应用都绕不开。pushState改URL只是改地址栏，刷新当然丢失前端状态。核心思路是：把状态存下来，页面加载时根据当前URL重新拉数据。

你说onload检查pathname觉得笨？其实没错，只是得系统化做。代码给你：

function handleRoute() {

  const path = window.location.pathname;

  

  if (path.startsWith('/user/')) {

    const userId = path.split('/')[2];

    fetchUser(userId).then(user => {

      document.title = user.name;

      // 渲染用户页面...

    }).catch(() => {

      history.replaceState(null, '', '/404');

    });

  } else {

    // 默认首页或其他路由

  }

}



// 页面首次加载

window.addEventListener('load', handleRoute);



// 浏览器前进后退

window.addEventListener('popstate', e => {

  handleRoute();

});



// 跳转函数

function navigateTo(path) {

  history.pushState(null, '', path);

  handleRoute();

}

要点：

1. 把路由处理抽成独立函数 handleRoute
2. load 和 popstate 都调它，保证逻辑一致
3. URL 就是你的“唯一真相源”，别依赖内存状态
4. pushState 第一个参数可以传状态，但不可靠，别当主力

进阶一点可以用 router 库，比如 vue-router 或者 htmx + morphdom 这套，但原理都一样：监听路径变化，重新渲染。

别想省事，该发请求还得发。做好 loading 状态提示就行。