前端路由核心是不刷新页面改变URL并响应视图变化，分History API（推荐、需服务端配合）和Hash（兼容好、SEO差）两类，现代框架均封装此机制。
JavaScript 实现前端路由，核心是**不刷新页面的前提下改变 URL 并响应视图变化**。主流方式分两类：基于浏览器 History API（推荐）和基于 URL Hash（兼容老浏览器）。现代框架（如 React Router、Vue Router）底层都封装了这两种机制。
Hash 路由（# 开头）
利用 window.location.hash 变化触发路由，不向服务器发送请求，兼容性好（支持 IE8+）。
- URL 示例：
https://example.com/#/home、https://example.com/#/user/123 - 监听方式：绑定
hashchange事件，读取location.hash.slice(1)获取路径 - 跳转方式：修改
location.hash = '/about'即可，浏览器自动记录历史 - 优点：简单、零服务端配置、无刷新、兼容强
- 缺点：URL 不够美观，SEO 不友好（搜索引擎通常忽略 # 后内容）
History 路由（HTML5 模式）
基于 history.pushState() 和 history.replaceState()，配合 popstate 事件实现无刷新导航，URL 更干净（如 /user/123）。
- 需服务端配合：所有前端路由路径都应返回同一份 HTML（如 index.html），否则直接访问会 404
- 监听前进/后退：用
window.addEventListener('popstate', handler) - 跳转示例：
history.pushState({ path: '/news' }, '', '/news') - 注意：
pushState不触发页面刷新，但不会加载新资源——渲染逻辑完全由 JS 控制
手动实现一个极简路由（History 版）
适合理解原理，实际项目建议用成熟库：
立即学习“Java免费学习笔记（深入）”；
function router() {
const routes = new Map();
function navigate(path) {
history.pushState({ path }, '', path);
render(path);
}
function render(path) {
const component = routes.get(path) || routes.get('/404');
document.getElementById('app').innerHTML = component?.() || 'Not Found';
}
window.addEventListener('popstate', e => render(e.state?.path || location.pathname));
return {
add: (path, handler) => routes.set(path, handler),
start: () => render(location.pathname)
};
}
// 使用
const app = router();
app.add('/', () => '
首页
');
app.add('/about', () => '关于
');
app.start();
框架路由怎么选？
React 推荐 React Router v6+（基于 History API，默认 BrowserRouter）；Vue 推荐 Vue Router 4（支持 history 和 hash 模式，可配置）；纯 JS 项目可用 Page.js 或 Navigo 等轻量库。
基本原则：新项目优先用 History 路由（体验好、URL 正规），老项目或需 IE 支持再降级用 Hash 路由。
基本上就这些。不复杂但容易忽略服务端配置和 history 回退监听细节。
