大家好，我是你们的老朋友FogLetter，今天我们来聊聊前端路由的那些事儿。路由的演进可以说是前端发展史上最精彩的篇章之一。
一、远古时代：刷新页面的痛苦回忆
还记得最开始的时候，做个网站是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<a href="about.html">关于我们</a>
</body>
</html>
每次点击链接，浏览器都会"无情"地刷新整个页面，那种等待的白屏时间，现在想想都觉得煎熬。更痛苦的是，页面状态无法保持，填了一半的表单？对不起，刷新就没了。
二、Hash时代的野蛮生长
随着Ajax技术的兴起，前端开发者们开始思考：如何在不刷新页面的情况下改变URL？于是，Hash路由应运而生。
1. Hash路由的工作原理
Hash路由利用了URL中#后面的部分不会引发页面刷新的特性。我们可以通过监听hashchange事件来实现前端路由：
window.addEventListener('hashchange', function() {
const path = window.location.hash.substr(1);
renderView(path);
});
2. Hash路由的优缺点
优点：
- 兼容性极好，连IE6都支持
- 实现简单，不需要服务器配合
- 不会导致页面刷新
缺点：
- URL看起来不专业，像
example.com/#/about - 不利于SEO（虽然现在Google能爬取Hash内容了）
- 无法使用锚点功能（因为#被路由占用了）
三、History API的优雅革命
HTML5带来了History API，终于让我们可以像后端路由一样优雅地改变URL，而无需刷新页面。
1. History API三剑客
// 添加历史记录
history.pushState(state, null, url);
// 替换当前历史记录
history.replaceState(state, null, url);
// 监听前进后退
window.addEventListener('popstate', function(e) {
// 处理路由变化
});
2. 一个完整的History路由实现
让我们看个完整例子：
<!DOCTYPE html>
<html>
<body>
<button onclick="navigate('/home')">首页</button>
<button onclick="navigate('/about')">关于</button>
<div id="view"></div>
<script>
function render(path) {
document.getElementById('view').textContent = `当前视图：${path}`;
}
function navigate(path) {
history.pushState({path}, null, path);
render(path);
}
window.addEventListener('popstate', (e) => {
render(e.state?.path || location.pathname);
});
// 初始渲染
render(location.pathname);
</script>
</body>
</html>
3. History路由的注意事项
- 服务器配置：需要将所有路由指向index.html，否则刷新会404
- 状态管理：pushState可以存储路由相关状态
- 安全限制：出于安全考虑，只能修改同源URL
四、React Router的实现原理
现代前端框架的路由库基本都是基于History API的封装。以React Router为例：
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
1. React Router的关键实现
- 监听变化：通过history.listen订阅路由变化
- 上下文传递：通过React Context传递路由信息
- 匹配算法：高效的路径匹配算法
2. 有趣的小知识
React Router v6的<Routes>组件内部使用了非常聪明的匹配算法。它会先匹配更具体的路径，比如/users/:id会比/users优先级高。这个改进让我们的路由配置更加直观。
五、History vs Hash：如何选择？
| 特性 | History路由 | Hash路由 |
|---|---|---|
| URL美观度 | 美观 | 带#不美观 |
| SEO | 友好 | 不友好 |
| 兼容性 | IE10+ | 所有浏览器 |
| 服务器配置 | 需要特殊配置 | 无需配置 |
| 锚点功能 | 可用 | 不可用 |
建议： 现代项目无脑选History路由，除非要兼容IE9及以下。
结语
从野蛮生长的Hash路由，到如今优雅的History API，前端路由的演进史就是一部前端技术的发展史。作为开发者，我们不仅要会用这些API，更要理解其背后的原理和设计思想。
最后送大家一句话："技术会过时，但思想永流传"。理解History API背后的设计理念，比记住API本身更重要。
