前端路由原理与Hash、History模式实现_js单页应用-js教程-PHP中文网

前端路由原理与Hash、History模式实现_js单页应用

夢幻星辰

发布： 2025-11-10 22:54:04

原创

894人浏览过

单页应用通过前端路由实现无刷新切换，核心是Hash和History两种模式。1. Hash模式利用URL中#后的部分变化触发hashchange事件，兼容性好但URL不美观；2. History模式使用pushState和replaceState API操作浏览器历史记录，配合popstate事件监听，可实现干净的URL路径，需服务端配置fallback以避免404。两者选择取决于浏览器兼容性、URL美观需求及服务端支持情况，理解其原理有助于掌握Vue Router、React Router等框架路由机制。

前端路由原理与hash、history模式实现_js单页应用

单页应用（SPA）之所以能实现页面无刷新切换，核心在于前端路由。它通过监听 URL 的变化，在不重新请求服务器的情况下动态加载对应视图内容。前端路由主要有两种实现方式：Hash 模式和 History 模式。

Hash 路由原理与实现

Hash 模式利用 URL 中的 # 后面的部分（即 hash 值）来模拟路由跳转。浏览器不会将 hash 部分发送给服务器，因此改变 hash 不会触发页面刷新，同时还会触发 hashchange 事件。

特点：

兼容性好，支持低版本浏览器
URL 中带有 #，不够美观
服务端无需特殊配置

手动实现示例：

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

立即学习“前端免费学习笔记（深入）”；

class HashRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', () => {
      const path = location.hash.slice(1) || '/';
      this.routes[path] && this.routes[path]();
    });
  }
  on(path, callback) {
    this.routes[path] = callback;
  }
  push(path) {
    location.hash = path;
  }
}
<p>// 使用
const router = new HashRouter();
router.on('/', () => console.log('首页'));
router.on('/about', () => console.log('关于页'));

登录后复制

History 路由原理与实现

History 模式基于 HTML5 的 History API（如 pushState、replaceState）实现。它能使用真实的 URL 路径（如 /about），看起来更自然。

关键 API：

history.pushState(state, title, url)：添加一条新记录，不刷新页面
history.replaceState(state, title, url)：替换当前记录
popstate 事件：当用户点击前进/后退按钮时触发

手动实现示例：

立即学习“前端免费学习笔记（深入）”；

class HistoryRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('popstate', (e) => {
      const path = location.pathname;
      this.routes[path] && this.routes[path](e.state);
    });
  }
  on(path, callback) {
    this.routes[path] = callback;
  }
  push(path, state = {}) {
    history.pushState(state, '', path);
    this.routes[path] && this.routes[path](state);
  }
  replace(path, state = {}) {
    history.replaceState(state, '', path);
    this.routes[path] && this.routes[path](state);
  }
}
<p>// 使用
const router = new HistoryRouter();
router.on('/home', () => console.log('进入 home'));
router.push('/home');

登录后复制