前端路由 Hash 和 History 模式原理对比区别

1. 基本概念

1.1 什么是前端路由

前端路由是指在单页应用（SPA）中，通过 JavaScript 来实现页面的切换和状态管理，而无需向服务器请求新的页面。主要有两种实现方式：Hash 模式和 History 模式。

1.2 为什么需要前端路由

提升用户体验：页面切换无需刷新，更流畅
减少服务器压力：无需每次都请求完整页面
实现前后端分离：前端负责路由，后端只提供数据
支持单页应用（SPA）：整个应用只有一个 HTML 页面

2. Hash 模式

2.1 原理

Hash 模式是基于 URL 的 hash（即 URL 中的 # 号）来实现的。hash 值的改变不会导致浏览器向服务器发送请求，但会触发 hashchange 事件。

// 基本实现原理
class HashRouter {constructor() {// 存储路由映射this.routes = {};// 监听 hash 变化window.addEventListener('hashchange', this.handleHashChange.bind(this));// 初始化时也需要处理一次window.addEventListener('load', this.handleHashChange.bind(this));}// 注册路由register(path, callback) {this.routes[path] = callback;}// 处理 hash 变化handleHashChange() {// 获取当前 hash 值const hash = window.location.hash.slice(1) || '/';// 执行对应的回调函数const handler = this.routes[hash];if (handler) {handler();}}// 导航到指定路由push(path) {window.location.hash = path;}
}// 使用示例
const router = new HashRouter();router.register('/', () => {console.log('Home page');
});router.register('/about', () => {console.log('About page');
});// 导航到指定页面
router.push('/about');

2.2 特点

兼容性好：
- 支持所有浏览器，包括 IE
- 无需服务器配置
URL 格式：
```
http://example.com/#/path
```
实现机制：
- 基于 window.location.hash
- 监听 hashchange 事件
服务器交互：
- hash 变化不会触发页面刷新
- 不会向服务器发送请求

3. History 模式

3.1 原理

History 模式是基于 HTML5 History API 实现的，主要使用 pushState() 和 replaceState() 方法来改变 URL，并且不会触发页面刷新。

// 基本实现原理
class HistoryRouter {constructor() {this.routes = {};// 监听 popstate 事件window.addEventListener('popstate', this.handlePopState.bind(this));// 初始化时处理当前路由this.handlePopState();// 拦截所有 <a> 标签点击事件document.addEventListener('click', e => {const target = e.target;if (target.tagName === 'A') {e.preventDefault();this.push(target.pathname);}});}// 注册路由register(path, callback) {this.routes[path] = callback;}// 处理路由变化handlePopState() {const path = window.location.pathname;const handler = this.routes[path];if (handler) {handler();}}// 导航到指定路由push(path) {// 更新 URLhistory.pushState({}, '', path);// 手动触发路由处理this.handlePopState();}// 替换当前路由replace(path) {history.replaceState({}, '', path);this.handlePopState();}
}// 使用示例
const router = new HistoryRouter();router.register('/', () => {console.log('Home page');
});router.register('/about', () => {console.log('About page');
});// 导航到指定页面
router.push('/about');

3.2 特点

URL 格式：
```
http://example.com/path
```
实现机制：
- 基于 HTML5 History API
- 监听 popstate 事件
服务器配置：
- 需要服务器支持
- 所有路由都指向同一个 HTML 文件

API 支持：

// 添加新记录
history.pushState(state, title, url)// 替换当前记录
history.replaceState(state, title, url)// 前进/后退
history.forward()
history.back()
history.go(n)

4. 两种模式的对比

4.1 实现原理对比

特性	Hash 模式	History 模式
URL 格式	带 # 号	无 # 号，更美观
实现原理	hashchange 事件	History API
服务器配置	不需要	需要配置支持
兼容性	所有浏览器	HTML5 浏览器

4.2 使用场景对比

Hash 模式适用于：
- 需要兼容老浏览器
- 无法修改服务器配置
- 简单的单页应用
History 模式适用于：
- 现代化的单页应用
- 可以配置服务器
- 需要更好的 URL 展示

5. 实际应用示例

5.1 Vue Router 配置

// Hash 模式
const router = new VueRouter({mode: 'hash',routes: [...]
});// History 模式
const router = new VueRouter({mode: 'history',routes: [...]
});

5.2 服务器配置

# Nginx 配置示例 (History 模式)
location / {try_files $uri $uri/ /index.html;
}

# Apache 配置示例 (History 模式)
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>

6. 最佳实践建议

6.1 选择建议

使用 Hash 模式当：
- 需要支持 IE9 及以下浏览器
- 无法修改服务器配置
- 项目较简单，对 URL 格式要求不高
使用 History 模式当：
- 只需支持现代浏览器
- 可以配置服务器
- 需要更优雅的 URL 格式

6.2 注意事项

Hash 模式注意点：
- hash 值不会发送到服务器
- SEO 不友好
- URL 不够美观
History 模式注意点：
- 需要服务器配置支持
- 刷新页面可能 404
- 需要处理前进/后退事件

6.3 性能优化

路由懒加载：

const router = new VueRouter({routes: [{path: '/about',component: () => import('./components/About.vue')}]
});

预加载：

// 在空闲时预加载其他路由组件
const PreloadAbout = () => {const link = document.createElement('link');link.rel = 'prefetch';link.href = '/about.chunk.js';document.head.appendChild(link);
};