一、Hash Router 的核心原理

1.1 什么是 Hash Router？

Hash Router 是一种基于 URL 中 hash 部分（即 # 后的内容）实现的前端路由机制。当 URL 的 hash 发生变化时，浏览器不会向服务器发起请求，而是通过监听 hashchange 事件来触发页面内容的更新。这种机制非常适合单页应用（SPA），因为它无需服务器支持即可实现页面间的无刷新切换。

1.2 Hash Router 的工作原理

Hash Router 的工作原理可以概括为以下几个步骤：

1. URL 解析：浏览器解析当前 URL 的 hash 部分。
2. 路由匹配：根据 hash 值匹配预先定义的路由规则。
3. 组件渲染：根据匹配结果渲染对应的组件或页面内容。
4. 监听变化：通过监听 hashchange 事件，在 hash 变化时重新执行路由匹配和组件渲染。

1.3 为什么选择 Hash Router？

• 兼容性：Hash Router 在所有主流浏览器中都能良好工作，包括一些较旧的浏览器。
• 无需服务器支持：由于 hash 变化不会触发页面刷新，因此无需服务器配置即可实现路由。
• 简单易用：相比 History API，Hash Router 的实现更为简单，适合初学者或小型项目。

二、手写 Hash Router 的实现步骤

2.1 初始化路由配置

首先，我们需要定义一个路由配置对象，用于存储 URL hash 与组件之间的映射关系。

const routes = {
  '/': HomeComponent,
  '/about': AboutComponent,
  '/contact': ContactComponent,
  // 可以继续添加更多路由
};

2.2 创建 Router 类

接下来，我们创建一个 Router 类，用于管理路由的注册、匹配和渲染。

class HashRouter {
  constructor() {
    this.routes = {};
    this.currentPath = '';
  }
  // 注册路由
  register(path, component) {
    this.routes[path] = component;
  }
  // 初始化路由
  init() {
    window.addEventListener('hashchange', this.handleHashChange.bind(this));
    this.handleHashChange();
  }
  // 处理 hash 变化
  handleHashChange() {
    this.currentPath = window.location.hash.slice(1) || '/';
    const component = this.routes[this.currentPath];
    if (component) {
      this.render(component);
    } else {
      console.error(`No route matched for path: ${this.currentPath}`);
    }
  }
  // 渲染组件
  render(component) {
    const container = document.getElementById('app');
    if (container) {
      container.innerHTML = '';
      container.appendChild(component());
    }
  }
}

2.3 使用 Router 类

现在，我们可以使用 Router 类来注册路由并初始化路由系统。

// 定义组件函数（这里使用简单的函数模拟组件）
function HomeComponent() {
  const div = document.createElement('div');
  div.textContent = 'Home Page';
  return div;
}
function AboutComponent() {
  const div = document.createElement('div');
  div.textContent = 'About Page';
  return div;
}
function ContactComponent() {
  const div = document.createElement('div');
  div.textContent = 'Contact Page';
  return div;
}
// 创建路由实例并注册路由
const router = new HashRouter();
router.register('/', HomeComponent);
router.register('/about', AboutComponent);
router.register('/contact', ContactComponent);
// 初始化路由
router.init();

2.4 测试路由

在浏览器中打开 HTML 文件，并通过修改 URL 的 hash 部分来测试路由是否按预期工作。例如，访问 #about 应该显示 About Page。

三、进阶功能与优化

3.1 动态路由

动态路由允许我们根据 URL 中的参数来匹配不同的组件。例如，/user/:id 可以匹配 /user/1、/user/2 等。

// 修改 register 方法以支持动态路由
register(path, component) {
  // 这里可以使用正则表达式或其他方式来实现动态路由匹配
  // 简化示例：仅支持 :id 形式的动态参数
  const dynamicPath = path.replace(/:(\w+)/g, '([^/]+)');
  const regex = new RegExp(`^${dynamicPath}$`);
  this.routes[regex] = { component, params: path.match(/:(\w+)/g) };
}
// 修改 handleHashChange 方法以处理动态路由
handleHashChange() {
  this.currentPath = window.location.hash.slice(1) || '/';
  let matchedRoute = null;
  let params = {};
  for (const [path, route] of Object.entries(this.routes)) {
    if (path instanceof RegExp) {
      const match = this.currentPath.match(path);
      if (match) {
        matchedRoute = route.component;
        if (route.params) {
          route.params.forEach((param, index) => {
            params[param.slice(1)] = match[index + 1];
          });
        }
        break;
      }
    } else if (path === this.currentPath) {
      matchedRoute = this.routes[path];
      break;
    }
  }
  if (matchedRoute) {
    // 可以将 params 传递给组件
    this.render(matchedRoute);
  } else {
    console.error(`No route matched for path: ${this.currentPath}`);
  }
}

3.2 嵌套路由

嵌套路由允许我们在一个组件内部再定义子路由，实现更复杂的页面布局。

实现嵌套路由需要修改 Router 类以支持嵌套的路由配置，并在渲染时递归处理嵌套的组件。

3.3 路由守卫

路由守卫允许我们在路由切换前后执行一些逻辑，如权限验证、数据加载等。

可以通过在 Router 类中添加 beforeEach 和 afterEach 方法来实现路由守卫。

四、总结与展望

通过本文的介绍，我们深入了解了 Hash Router 的工作原理，并手写实现了一个基本的 Hash Router。我们还探讨了动态路由、嵌套路由和路由守卫等进阶功能，这些功能可以进一步提升 Hash Router 的灵活性和实用性。

未来，随着前端技术的不断发展，Hash Router 可能会被更先进的路由方案所取代，如基于 History API 的路由。然而，Hash Router 作为一种简单、兼容性好的路由方案，仍然在某些场景下具有独特的价值。因此，掌握 Hash Router 的实现原理对于前端开发者来说仍然是非常重要的。