前端路由原理与Hash/History模式解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《前端路由原理及Hash与History模式详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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

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

Hash 路由原理与实现

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

特点：

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

手动实现示例：

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('关于页'));
</p>

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');
</p>

两种模式对比与选型建议

选择哪种模式取决于项目需求和部署环境。

Hash 模式适用场景：

• 需要兼容 IE9 等老旧浏览器
• 项目部署在静态服务器上，无法配置回退路由
• 对 URL 美观度要求不高

History 模式适用场景：

• 追求更友好的 URL 结构
• 现代浏览器环境
• 服务端可配合配置（如所有路径返回 index.html）

使用 History 模式时，服务端必须配置 fallback，确保所有前端路由路径都返回同一个 HTML 文件，否则直接访问会 404。

基本上就这些。理解前端路由的本质，有助于更好地掌握 Vue Router、React Router 等框架级路由工具的底层逻辑。

文中关于单页应用,前端路由,history模式,HistoryAPI,Hash模式的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《前端路由原理与Hash/History模式解析》文章吧，也可关注golang学习网公众号了解相关技术文章。