首页 > 文章 > 前端

JavaScript实现无刷新路由技巧

时间：2026-01-24 08:06:33 494浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript操作浏览器历史记录并实现无刷新路由，主要依赖于HTML5的History API。以下是实现无刷新路由的基本步骤和代码示例：1. 使用 history.pushState() 或 history.replaceState()这两个方法可以修改浏览器的URL，而不会导致页面重新加载。// 添加新历史记录 history.pushState(state, title, url); // 替换当前历史记录 history.replaceState(state, title, url);state：一个对象，用于存储与该历史条目相关的信息。title：当前页面的标题（部分浏览器支持）。url：新的URL，不包含域名和协议。2. 监听 popstate 事件当用户点击浏览器的前进或后退按钮时，会触发 popstate 事件，可以通过这个事件来更新页面内容。window.addEventListener('popstate', function(event) { // 根据 event.state 获取当前状态 // 更新页面内容 });3. 实现无刷新路由的完整示例以下是一个简单的单页应用（SPA）实现无刷新路由的例子：无刷新路由示例

，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

使用History API实现无刷新路由：通过pushState添加历史记录，replaceState修改当前记录，结合popstate监听浏览器前进后退，配合事件代理拦截链接点击，实现页面跳转不刷新，提升单页应用体验。

如何利用JavaScript操作浏览器历史记录并实现无刷新路由？

在现代前端开发中，实现无刷新路由是构建单页应用（SPA）的核心技术之一。通过JavaScript操作浏览器历史记录，可以在不重新加载页面的情况下改变URL并更新视图，提升用户体验。

使用 History API 操作浏览器历史

HTML5 提供了 History API，允许开发者安全地操纵浏览器会话历史。关键方法包括：

history.pushState(state, title, url)：添加新记录到历史栈
history.replaceState(state, title, url)：替换当前历史记录
window.onpopstate：监听前进/后退触发的事件

这些方法不会触发页面刷新，适合用于动态更新内容。

pushState 实现跳转并保留状态

当你想模拟页面跳转但不刷新时，可以使用 pushState：

const navigateTo = (url, data) => {
  history.pushState(data, '', url);
  // 更新页面内容
  renderPage(url);
};

// 示例：跳转到用户页
navigateTo('/user/123', { userId: 123 });

此时 URL 变化，但页面未刷新。你可以将数据存入 state 中，便于后续恢复。

监听浏览器导航行为

用户点击“返回”按钮时，需要响应历史变化。通过监听 popstate 事件来处理：

这样无论用户如何前进后退，页面都能正确显示对应内容。

结合事件代理实现完整路由系统

为避免每次跳转都手动调用函数，可拦截所有链接点击：

document.addEventListener('click', (e) => {
  const link = e.target.closest('a');
  if (!link) return;

  const href = link.getAttribute('href');
  if (href && href.startsWith('/') && !e.ctrlKey && !e.metaKey) {
    e.preventDefault();
    history.pushState(null, '', href);
    route(); // 手动触发路由匹配
  }
});

// 初始化时也执行一次路由
window.addEventListener('load', route);
window.addEventListener('popstate', route);

配合一个 route() 函数解析当前路径并渲染对应组件，即可形成完整的客户端路由机制。

基本上就这些。利用 History API 配合事件监听，就能实现流畅的无刷新导航，是现代前端路由的基础原理。

理论要掌握，实操不能落！以上关于《JavaScript实现无刷新路由技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

前往漫画官网入口并下载 ➜