logo

开发者热搜

手写 Hash Router：从原理到实现

作者：宇宙中心我曹县2025.09.19 12:47浏览量：5

简介：本文深入解析Hash Router的核心原理，结合代码示例详细说明如何手动实现一个轻量级路由系统，涵盖监听机制、路由匹配、动态参数处理等关键环节。

一、Hash Router 的核心原理

Hash Router（哈希路由）是前端路由实现中最基础的一种方案，其核心原理依赖于URL的哈希部分（即#之后的内容）的变化。当URL哈希改变时，浏览器不会重新加载页面，而是触发hashchange事件，开发者可以通过监听该事件实现单页应用（SPA）的路由切换。

1.1 哈希值与浏览器行为

URL的哈希部分原本用于指定页面内的锚点位置，但现代前端框架利用其“无刷新”特性实现路由控制。例如：

  • https://example.com/#/home
  • https://example.com/#/profile

浏览器会加载同一HTML文件，但哈希值的差异可通过JavaScript捕获，进而动态更新页面内容。

1.2 哈希变化的触发方式

哈希值可通过以下方式改变：

  1. 用户点击链接：<a href="#/about">About</a>
  2. 代码修改location.hash：window.location.hash = '/contact'
  3. 浏览器前进/后退：触发历史记录中的哈希变化

1.3 事件监听机制

通过window.addEventListener('hashchange', callback)，开发者可在哈希变化时执行路由匹配逻辑。结合window.location.hash可获取当前哈希值，解析后决定渲染哪个组件。

二、手写 Hash Router 的实现步骤

2.1 初始化路由容器与配置

首先需要定义路由表，存储路径与对应组件的映射关系：

  1. class HashRouter {
  2.   constructor(options) {
  3.     this.routes = options.routes || {}; // 路由配置 { '/home': HomeComponent }
  4.     this.currentPath = '';
  5.     this.init();
  6.   }
  8.   init() {
  9.     // 监听hashchange事件
  10.     window.addEventListener('hashchange', this.onHashChange.bind(this));
  11.     // 初始路由匹配
  12.     this.onHashChange();
  13.   }
  14. }

2.2 哈希变化处理逻辑

在onHashChange方法中，需完成以下操作：

  1. 获取当前哈希值（去掉#前缀）
  2. 匹配路由表中的组件

  3. 渲染对应组件到DOM容器

    1. onHashChange() {
    2. this.currentPath = window.location.hash.slice(1) || '/';
    3. const Component = this.routes[this.currentPath];
    5. if (Component) {
    6.  const container = document.getElementById('app');
    7.  container.innerHTML = '';
    8.  container.appendChild(new Component().render());
    9. } else {
    10.  console.error('404: Route not found');
    11. }
    12. }

2.3 动态路由参数处理

实际场景中，路由可能包含动态参数（如/user/:id）。需实现参数解析功能：

  1. // 扩展路由配置
  2. {
  3.   '/user/:id': UserComponent
  4. }
  6. // 解析逻辑
  7. parsePath(path) {
  8.   const regex = /^\/user\/([^\/]+)$/;
  9.   const match = path.match(regex);
  10.   if (match) {
  11.     return { component: this.routes['/user/:id'], params: { id: match[1] } };
  12.   }
  13.   return null;
  14. }

2.4 路由导航方法

提供编程式导航API，允许代码中触发路由跳转：

  1. class HashRouter {
  2.   // ...其他代码
  3.   push(path) {
  4.     window.location.hash = path;
  5.   }
  7.   replace(path) {
  8.     const oldHash = window.location.hash;
  9.     window.location.hash = path;
  10.     // 替换历史记录需结合history.replaceState（需额外处理）
  11.   }
  12. }

三、完整实现示例

  1. class HashRouter {
  2.   constructor(options) {
  3.     this.routes = options.routes || {};
  4.     this.container = options.container || 'app';
  5.     this.currentPath = '';
  6.     this.init();
  7.   }
  9.   init() {
  10.     window.addEventListener('hashchange', this.onHashChange.bind(this));
  11.     this.onHashChange();
  12.   }
  14.   onHashChange() {
  15.     this.currentPath = window.location.hash.slice(1) || '/';
  16.     const result = this.parsePath(this.currentPath);
  18.     if (result) {
  19.       const { component: Component, params } = result;
  20.       document.getElementById(this.container).innerHTML = '';
  21.       const instance = new Component(params);
  22.       document.getElementById(this.container).appendChild(instance.render());
  23.     } else {
  24.       console.error('404: Route not found');
  25.     }
  26.   }
  28.   parsePath(path) {
  29.     for (const [routePattern, Component] of Object.entries(this.routes)) {
  30.       const params = {};
  31.       const regexStr = routePattern
  32.         .replace(/\/:([^\/]+)/g, (match, paramName) => {
  33.           params[paramName] = true;
  34.           return '/([^/]+)';
  35.         });
  36.       const regex = new RegExp(`^${regexStr}$`);
  37.       const match = path.match(regex);
  39.       if (match) {
  40.         const actualParams = {};
  41.         Object.keys(params).forEach((key, index) => {
  42.           actualParams[key] = match[index + 1];
  43.         });
  44.         return { component: Component, params: actualParams };
  45.       }
  46.     }
  47.     return null;
  48.   }
  50.   push(path) {
  51.     window.location.hash = path;
  52.   }
  53. }
  55. // 使用示例
  56. class Home {
  57.   render() {
  58.     const div = document.createElement('div');
  59.     div.textContent = 'Home Page';
  60.     return div;
  61.   }
  62. }
  64. class User {
  65.   constructor(params) {
  66.     this.id = params.id;
  67.   }
  69.   render() {
  70.     const div = document.createElement('div');
  71.     div.textContent = `User ID: ${this.id}`;
  72.     return div;
  73.   }
  74. }
  76. const router = new HashRouter({
  77.   routes: {
  78.     '/': Home,
  79.     '/user/:id': User
  80.   },
  81.   container: 'app'
  82. });
  84. // 触发路由
  85. router.push('/user/123');

四、优化与扩展方向

  1. 路由守卫：添加beforeEach和afterEach钩子实现权限控制
  2. 懒加载：结合动态import()实现组件按需加载
  3. 嵌套路由：支持多级路由结构
  4. 哈希模式兼容性：处理IE等旧浏览器的onhashchange兼容问题
  5. TypeScript支持：添加类型定义提升代码可维护性

五、实际应用建议

  1. 小型项目首选：Hash Router实现简单，适合原型开发或轻量级应用
  2. 结合构建工具：使用Webpack/Vite等工具的HTML5 History API fallback配置
  3. 服务端配合：确保服务端对所有路由返回同一HTML文件
  4. 性能监控：通过performance.navigation检测路由切换耗时

通过手写Hash Router，开发者不仅能深入理解前端路由机制，还能根据项目需求定制化功能。这种实现方式在面试场景中常被用作考察对前端工程化的理解深度，同时也是学习React Router/Vue Router等库的绝佳起点。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询