如何用JavaScript实现哈希路由？

哈希路由是前端单页应用中常见的路由实现方式，核心是通过监听URL中hash值的变化来触发对应的页面逻辑，整个过程不需要向服务端发起新的页面请求，能实现无刷新切换视图的效果。它的实现不依赖服务端配置，兼容性也比较好，适合中小型单页应用使用。

哈希路由的核心原理

URL中的hash指的是#号后面的部分，这部分内容的变化不会触发浏览器向服务端发起请求，同时浏览器提供了hashchange事件，可以监听hash值的变化。我们只需要维护一个路由表，将不同的hash路径和对应的处理函数绑定，当hash变化时匹配对应路由执行逻辑即可。

基础实现步骤

1. 定义路由表

路由表用来存储hash路径和对应处理逻辑的映射关系，键是hash路径，值是对应的回调函数，回调函数中一般写更新页面视图的逻辑。

2. 监听hash变化

通过window.addEventListener监听hashchange事件，当hash变化时会触发回调函数，在回调中执行路由匹配逻辑。

3. 初始路由处理

页面首次加载时，hash值可能已经存在，这时候需要手动触发一次路由匹配，保证初始状态正确。

4. 实现路由跳转

可以封装一个跳转函数，通过修改window.location.hash的值来切换路由，触发hashchange事件。

完整代码示例

下面是一个简单的哈希路由实现，包含路由注册、监听、跳转等完整功能：

// 哈希路由类
class HashRouter {
  constructor() {
    // 存储路由规则，键为hash路径，值为对应的处理函数
    this.routes = {};
    // 初始化监听
    this.init();
  }

  // 初始化监听hash变化
  init() {
    // 监听hashchange事件
    window.addEventListener('hashchange', () => {
      this.render();
    });
    // 页面加载时触发一次路由渲染
    window.addEventListener('load', () => {
      this.render();
    });
  }

  // 注册路由规则
  register(hash, callback) {
    this.routes[hash] = callback;
  }

  // 路由跳转
  go(hash) {
    window.location.hash = hash;
  }

  // 匹配当前hash执行对应逻辑
  render() {
    // 获取当前hash，去掉开头的#
    let currentHash = window.location.hash.slice(1) || '/';
    // 匹配路由，如果有对应规则就执行回调
    if (this.routes[currentHash]) {
      this.routes[currentHash]();
    } else {
      // 没有匹配到路由可以执行404逻辑
      console.log('未匹配到对应路由');
    }
  }
}

// 创建路由实例
const router = new HashRouter();

// 注册路由规则
// 首页路由
router.register('/', () => {
  document.getElementById('app').innerHTML = '<h1>首页内容</h1>';
});

// 关于页路由
router.register('about', () => {
  document.getElementById('app').innerHTML = '<h1>关于我们</h1>';
});

// 列表页路由
router.register('list', () => {
  document.getElementById('app').innerHTML = '<h1>文章列表页</h1>';
});

// 点击跳转示例
document.getElementById('toAbout').addEventListener('click', () => {
  router.go('about');
});

哈希路由的优缺点

哈希路由的优点很明显，实现简单，不需要服务端做任何配置，兼容性好，支持低版本浏览器。缺点也很突出，URL中会带有#号，美观度不如history路由，同时hash值变化不会发送到服务端，部分场景下的SEO支持不如history路由。

如果项目对URL美观度要求不高，且不需要考虑复杂SEO场景，用原生JavaScript实现哈希路由是个很实用的选择，上面的代码可以直接稍作修改应用到实际项目中。

JavaScript哈希路由前端路由window.locationhashchange修改时间：2026-06-05 02:22:36