前端路由原理：Hash与History模式详解

前端路由是单页应用（SPA）实现无刷新页面切换的核心技术，主要依靠Hash和History两种模式：Hash模式通过URL中的#号片段变化触发视图更新，兼容性强、无需服务端配合，但URL不美观且不利于SEO；History模式则借助HTML5的pushState和popstate API实现更自然、简洁的路径跳转，URL干净、利于SEO和用户体验，但要求服务器正确配置以支持任意路由返回index.html。理解二者原理与取舍，不仅能帮助开发者根据项目需求合理选型，也是深入掌握现代前端框架（如Vue Router、React Router）路由机制与排障能力的关键基础。

前端路由是单页应用（SPA）的核心机制之一，它允许在不刷新页面的情况下实现视图切换和URL变化。相比传统的多页应用，SPA通过前端路由管理不同页面的展示，提升用户体验。目前主流的前端路由实现方式有两种：Hash模式和History模式。

Hash 模式原理

Hash 模式利用 URL 中的 # 符号后的部分（即 hash 值）来控制路由跳转，hash 的变化不会触发页面重新加载，且不会发送到服务器。

其核心原理是监听 window.onhashchange 事件，当 hash 改变时，根据新的 hash 值渲染对应的内容。

示例代码：

// 监听 hash 变化
window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1) || '/';
  renderPage(hash);
});

function renderPage(path) {
  const app = document.getElementById('app');
  switch(path) {
    case '/home':
      app.innerHTML = '<h1>首页</h1>';
      break;
    case '/about':
      app.innerHTML = '<h1>关于页</h1>';
      break;
    default:
      app.innerHTML = '<h1>404</h1>';
  }
}

优点：

• 兼容性好，支持低版本浏览器
• 不需要服务器配置，所有路径都指向同一 HTML 文件

缺点：

• URL 中带有 #，不够美观
• 不利于 SEO（搜索引擎优化）

History 模式原理

History 模式基于 HTML5 的 History API（pushState、replaceState）实现，可以操作浏览器历史记录并修改 URL 而不引起页面刷新。

通过 window.onpopstate 监听浏览器前进后退操作，结合 pushState 修改地址栏路径。

示例代码：

// 路由跳转函数
function navigateTo(path) {
  window.history.pushState({}, '', path);
  renderPage(path);
}

// 监听浏览器回退/前进
window.addEventListener('popstate', () => {
  renderPage(window.location.pathname);
});

// 初始化页面
navigateTo(window.location.pathname || '/');

优点：

• URL 干净，无 #，更接近传统网站路径
• 利于 SEO，便于服务端渲染配合

缺点：

• 需要服务器支持，访问任意路由时需返回 index.html
• 配置相对复杂，部署时需额外处理

两种模式对比与选择

Hash 模式适合对 SEO 要求不高、追求快速上线和兼容性的项目；History 模式更适合追求良好用户体验和 SEO 的正式产品。

现代前端框架如 Vue Router 和 React Router 都同时支持两种模式，开发者可通过配置轻松切换。

Vue Router 示例：

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes: [...]
});

基本上就这些。理解前端路由的底层机制有助于更好地掌握 SPA 开发逻辑，也能在遇到路由问题时快速定位原因。

到这里，我们也就讲完了《前端路由原理：Hash与History模式详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！