如何在JavaScript中实现哈希路由？

在现代前端开发中，单页应用（SPA）已成为主流架构，而路由管理是SPA的核心功能之一。哈希路由（Hash Routing）作为一种简单、兼容性强的方案，被广泛用于实现无刷新页面跳转。无论是构建轻量级项目还是需要兼容老旧浏览器的场景，哈希路由都能提供优雅的解决方案。深入讲解如何在JavaScript中实现哈希路由，从原理剖析到代码实践，带你彻底掌握这一关键技术。

一、什么是哈希路由？

哈希路由利用URL中#符号后的部分（即hash）来实现路由切换。当hash变化时，浏览器不会向服务器发送请求，但会触发hashchange事件，从而允许开发者通过JavaScript动态更新页面内容。例如：

http://example.com#home
http://example.com#about

这种方式的优势在于：

兼容性强：支持所有浏览器，包括IE8+。
无需服务器配置：完全由前端控制路由逻辑。
无刷新跳转：提升用户体验，避免页面重载。

二、哈希路由的核心实现步骤

1. 监听hash变化

通过window.addEventListener('hashchange', callback)监听URL中hash的变化，并在回调函数中处理路由逻辑：

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.substring(1); // 去掉#号
  console.log('当前路由：', hash);
  // 根据hash更新页面内容
});

2. 初始化路由状态

页面加载时需手动触发一次路由解析，因为hashchange事件不会在首次加载时自动触发：

window.addEventListener('load', () => {
  const initialHash = window.location.hash.substring(1) || 'home'; // 默认路由
  handleRoute(initialHash);
});

3. 实现路由匹配与渲染

根据hash值匹配对应的组件或内容，并动态渲染到页面中。以下是一个简单示例：

function handleRoute(route) {
  const contentDiv = document.getElementById('app');
  switch (route) {
    case 'home':
      contentDiv.innerHTML = '<h1>首页</h1>';
      break;
    case 'about':
      contentDiv.innerHTML = '<h1>关于我们</h1>';
      break;
    default:
      contentDiv.innerHTML = '<h1>404 Not Found</h1>';
  }
}

三、进阶优化技巧

1. 支持路由参数

通过解析hash中的参数（如#user/123），可以实现动态路由：

const route = window.location.hash.substring(1);
if (route.startsWith('user/')) {
  const userId = route.split('/')[1];
  console.log('用户ID：', userId);
}

2. 路由历史管理

使用window.history.pushState（需配合服务器配置）或直接修改window.location.hash来记录路由历史：

function navigateTo(route) {
  window.location.hash = route;
}

3. 封装为工具类

将路由逻辑封装成可复用的类，例如：

class HashRouter {
  constructor(routes) {
    this.routes = routes;
    window.addEventListener('hashchange', this.handleHashChange.bind(this));
  }
  handleHashChange() {
    const hash = window.location.hash.substring(1);
    const handler = this.routes[hash] || this.routes['404'];
    handler();
  }
}

// 使用示例
const router = new HashRouter({
  home: () => console.log('进入首页'),
  about: () => console.log('进入关于页'),
  '404': () => console.log('页面不存在')
});