hash 模式和 history 模式是前端路由实现的两种常见方式，分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。
1. 浏览器实现
1.1 Hash 模式
• 核心机制：
• 基于浏览器的 location.hash 属性和 hashchange 事件。
• # 后的内容（如 #home）被称为 "fragment identifier"，不会被浏览器发送到服务器，因此只在前端有效。
• 特点：
• 改变 location.hash 不会重新加载页面。
• 支持 hashchange 事件监听，当 hash 改变时触发回调函数。
• 兼容性较好，适用于所有主流浏览器（包括较老的浏览器）。
• 实现示例：
window.location.hash = '#home'; // 改变 hash 值
window.addEventListener('hashchange', () => {
console.log('Hash changed to:', window.location.hash);
});
1.2 History 模式
• 核心机制：
• 基于 HTML5 的 history.pushState() 和 history.replaceState() 方法。
• 允许动态更改浏览器地址栏的 URL，同时不会触发页面刷新。
• 可通过 popstate 事件监听历史记录的变化。
• 特点：
• URL 更加优雅，无需 # 符号，像传统的服务器路由一样。
• 浏览器的前进、后退按钮可以正常使用。
• 需要服务器配置支持，否则刷新页面会导致 404 错误。
• 实现示例：
window.history.pushState({ page: 1 }, 'Title 1', '/page1'); // 修改 URL
window.addEventListener('popstate', (event) => {
console.log('History changed:', event.state);
});
2. 前端框架实现
前端框架（如 Vue Router、React Router）对 hash 和 history 模式进行了封装，提供了统一的路由管理功能。
2.1 Hash 模式实现
• 路由表：
前端框架通常会维护一个路由表，将 hash 值映射到对应的组件。
• URL 变化监听：
通过监听 hashchange 事件，获取当前的 location.hash，匹配到相应的路由。
• 示例：
Vue Router 配置 hash 模式：
export default new VueRouter({
mode: 'hash',
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
],
});
2.2 History 模式实现
• 路由表：
与 hash 模式类似，前端框架也会维护一个路由表，将路径映射到组件。
• URL 操作：
使用 history.pushState() 和 history.replaceState() 修改 URL。
• URL 变化监听：
通过监听 popstate 事件来处理浏览器的前进和后退。
• 示例：
Vue Router 配置 history 模式：
export default new VueRouter({
mode: 'history',
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
],
});
3. 相关标准定义
3.1 Hash 模式的标准
• 来源 ：fragment identifier 的定义最早出现在 URI 标准 中。
• 定义：
• # 后的部分不会影响服务器请求，仅用于客户端处理。
• 典型用途包括页面内导航和 AJAX 加载内容。
3.2 History 模式的标准
• 来源：HTML5 规范，定义了 History API。
• 核心 API：
• pushState(state, title, url)：添加一条新的浏览历史记录。
• replaceState(state, title, url)：修改当前的历史记录。
• popstate 事件：当用户通过浏览器的前进、后退按钮改变历史记录时触发。
• 优势：
• 提供了与服务器路由一致的 URL 格式，更符合现代 Web 应用需求。
• 能保存页面状态，可用于复杂的单页应用（SPA）。
4. 两者的对比总结
| 特性 | Hash 模式 | History 模式 |
|---|---|---|
| URL 形式 | 带有 #，如 /#/home | 无 #，如 /home |
| 改变 URL 的方式 | location.hash | pushState() 和 replaceState() |
| 刷新页面是否支持 | 不依赖服务器，刷新不会 404 | 需要服务器支持，否则刷新会 404 |
| 浏览器兼容性 | 兼容性好，适用于较老的浏览器 | 依赖 HTML5，较老浏览器（如 IE9 以下）不支持 |
| SEO 支持 | 不支持 | 支持 |
| 开发与部署复杂度 | 简单，无需服务器配置 | 需要配置服务器，增加开发复杂度 |
总结
• Hash 模式：简单易用，适合小型或不需要 SEO 的项目。
• History 模式：现代化、SEO 友好，适合大型或需要优雅 URL 的项目。