前端路由核心是history.pushState和hashchange API，前者修改URL不刷新但需服务端配合，后者通过#变化实现兼容性更好的路由。
前端路由靠的是 history.pushState 和 hashchange
单页面应用（SPA）不刷新页面就能切换视图，核心不是框架魔法，而是浏览器原生 API 的组合使用。history.pushState 可以修改 URL 且不触发跳转，hashchange 事件能监听地址栏 # 后的变化。两者都绕过了服务端请求，把路由控制权交还给前端。
现代框架如 React Router、Vue Router 底层都基于它们，只是做了封装和状态同步。注意：pushState 修改的是完整路径（如 /user/123），但需要服务端配合——否则用户直接访问该 URL 会 404；而 hash 模式（如 #!/user/123）天然兼容旧浏览器，且无需服务端配置，因为 # 后内容不会发给服务器。
手动实现一个最小可用的 history 路由
不用框架也能跑起来，关键在于三件事：拦截链接点击、响应 URL 变化、渲染对应组件。下面是最简逻辑：
function createRouter(routes) {
function navigate(path) {
history.pushState({ path }, '', path);
render(path);
}
function render(path) {
const route = routes.find(r => r.path === path);
document.getElementById('app').innerHTML = route?.component || '404';
}
window.addEventListener('popstate', e => render(e.state?.path || location.pathname));
document.addEventListener('click', e => {
if (e.target.matches('a[data-router]')) {
e.preventDefault();
navigate(e.target.getAttribute('href'));
}
});
// 初始化
render(location.pathname);
}
// 使用示例
createRouter([
{ path: '/', component: '<h3>Home</h3>' },
{ path: '/about', component: '<h3>About</h3>' }
]);
注意点：
立即学习“Java免费学习笔记（深入）”；
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
-
data-router是自定义属性，用于区分哪些<a></a>需要前端接管，避免误拦外部链接 -
popstate处理浏览器前进/后退，但不会触发初始加载，所以最后要手动调一次render -
history.pushState的第一个参数是 state 对象，会被塞进popstate事件的e.state中，别传null
Hash 模式更简单但 URL 不够美观
如果不想配服务端或兼容 IE9，hash 是更稳妥的选择。它只监听 hashchange，URL 改变不触发页面刷新，也不影响服务端路由。
改写上面的 navigate 函数即可：
function navigate(path) {
location.hash = path;
}
window.addEventListener('hashchange', () => {
const path = location.hash.slice(1) || '/';
render(path);
});
常见坑：
-
location.hash始终带#，取值记得用slice(1)或replace(/^#/, '') - 首次进入页面时
hashchange不触发，得手动执行一次渲染逻辑 - 某些 CMS 或静态托管（如 GitHub Pages）对
pushState路由支持差，hash是兜底方案
真实项目中必须处理的边界问题
手写路由容易忽略这些实际场景：
- 路由参数解析：比如
/user/:id要匹配/user/123并提取id=123，正则或URLPattern（新版 Chrome 支持）更可靠，别硬写split('/') - 嵌套路由：子组件也需要知道自己的路径前缀，否则
useNavigate或Link会拼错地址 - 滚动复位：从详情页返回列表页，应自动滚回顶部，需监听
popstate后调用window.scrollTo(0, 0) - 404 捕获：
pushState后用户可能输入错误路径，前端要兜底渲染 404 页面，不能留白
路由看似只是改个 URL，但路径解析、状态同步、生命周期管理、服务端协作，每一块都容易出隐性 bug。越早意识到这些点，后期迁移或调试就越省力。
