怎样设计哈希路由规则

设计“哈希路由（Hash Routing）”规则，通常出现在前端单页应用（SPA）中，用于在不需要后端配合、不改变真实 URL 路径的情况下实现页面切换。下面从原理 → 规则设计 → 示例 → 最佳实践逐步说明。

一、哈希路由的基本原理

哈希路由利用 URL 中的 # 后面的部分：

https://example.com/#/user/profile

• #/user/profile 就是路由信息
• 改变 hash 不会触发页面刷新
• 浏览器会通过 hashchange 事件通知前端

核心监听方式：

window.addEventListener('hashchange', () => {
  const route = location.hash.slice(1); // 去掉 #
});

二、哈希路由规则设计的核心要素

设计哈希路由规则时，建议考虑以下 5 点：

1️⃣ 统一的路由前缀

推荐使用 / 作为 hash 路由起点：

#/home
#/user
#/order/detail

避免：

#home
#user/profile

2️⃣ 层级清晰（路径式结构）

使用类 REST 风格：

#/模块/子模块/资源ID

示例：

#/user/list
#/user/detail/123
#/settings/security

3️⃣ 参数传递方式（两种常见方案）

✅ 方案 A：路径参数（推荐）

#/user/detail/123

• 清晰
• 易匹配
• 适合结构化页面

✅ 方案 B：查询参数

#/user/detail?id=123

• 适合可选参数
• 可读性稍差

4️⃣ 默认路由（兜底）

必须设计一个默认页：

#/home

或

#/（空 hash）

5️⃣ 错误 / 未匹配路由

建议统一跳转：

#/404

三、一个完整的哈希路由规则示例

路由表设计

const routes = {
  '/': Home,
  '/user': UserList,
  '/user/detail/:id': UserDetail,
  '/settings': Settings,
  '/404': NotFound
};

简单匹配逻辑

function matchRoute(path) {
  for (const key in routes) {
    const regex = new RegExp('^' + key.replace(/:\w+/g, '(\\w+)') + '$');
    const match = path.match(regex);
    if (match) {
      return {
        component: routes[key],
        params: match.slice(1)
      };
    }
  }
  return { component: routes['/404'] };
}

四、哈希路由的高级设计建议

✅ 1. 支持嵌套路由

#/user
  └─ #/user/profile
  └─ #/user/security

✅ 2. 支持重定向

#/old-page → #/new-page

✅ 3. 路由守卫（权限控制）

if (!isLogin() && path !== '/login') {
  location.hash = '#/login';
}

✅ 4. 记录滚动位置（可选）

• 在 hashchange 前保存
• 切换后恢复

五、哈希路由 vs History 路由对比

六、总结一句话

哈希路由规则设计的关键是：统一前缀、路径化结构、参数清晰、默认与异常路由齐全。

如果你有具体使用场景（如 Vue / React / 原生 JS / 微信内嵌页），我可以直接帮你设计一套可用的路由规则。