前端路由通过History API实现无刷新更新视图，利用pushState和replaceState修改URL并监听popstate事件响应导航，结合路由映射与服务端fallback配置，确保页面正确渲染且URL美观。
前端路由的实现核心在于不刷新页面的情况下，动态更新视图并管理浏览器的历史记录。使用 History API 实现的前端路由，相比传统的 hash 路由（#）更加美观，URL 更干净。下面详细说明其原理和实现方式。
History API 基本概念
HTML5 提供了 history.pushState() 和 history.replaceState() 方法，以及 popstate 事件，使得我们可以在不刷新页面的前提下操作浏览器历史栈。
- pushState(state, title, url)：向历史记录添加一条新记录，不会触发页面刷新。
- replaceState(state, title, url)：替换当前历史记录，不会新增条目。
- popstate 事件：当用户点击浏览器前进/后退按钮时触发，可用于监听 URL 变化并更新视图。
注意：pushState 和 replaceState 不会触发 popstate 事件，只有浏览器导航行为（如点击返回）才会触发。
前端路由如何工作
基于 History API 的前端路由主要通过以下步骤实现：
立即学习“Java免费学习笔记（深入）”；
- 拦截链接跳转（例如通过监听 a 标签的 click 事件），调用 pushState 修改 URL 并更新视图。
- 监听 popstate 事件，在用户点击前进/后退时重新渲染对应页面。
- 定义路由映射表，将路径与组件或渲染函数关联。
- 处理服务端支持：所有路由都应指向同一个 HTML 文件（如 index.html），避免 404 错误。
示例代码片段：
const routes = {
'/': () => render('Home Page'),
'/about': () => render('About Page')
};
function render(page) {
document.getElementById('app').innerHTML = page;
}
window.addEventListener('popstate', () => {
const path = window.location.pathname;
routes[path] ? routes[path]() : render('404 Not Found');
});
function navigateTo(path) {
window.history.pushState({}, '', path);
routes[path] ? routes[path]() : render('404 Not Found');
}
// 拦截 a 标签点击
document.addEventListener('click', e => {
if (e.target.tagName === 'A' && e.target.href.startsWith('/')) {
e.preventDefault();
navigateTo(e.target.getAttribute('href'));
}
});
服务端配置注意事项
由于使用了非 hash 的路径，如果用户直接访问 /about 或刷新页面，浏览器会向服务端请求 /about 这个资源。如果服务端没有配置 fallback 到 index.html，就会返回 404。
解决方法是配置服务器，将所有前端路由路径重定向到 index.html，交由 JavaScript 处理。常见配置如下：
- Nginx：使用 try_files 指令。
- Express：添加 app.get('*', serveIndex) 路由。
- Vite/Webpack Dev Server：启用 historyApiFallback 选项。
对比 Hash 路由的优势
History API 路由生成的 URL 更自然，例如 /user/123，而 hash 路由只能做到 #/user/123。前者对 SEO 更友好，且更符合用户对 URL 的预期。虽然实现略复杂，需要服务端配合，但在现代单页应用中已成为主流选择。
基本上就这些，掌握 pushState、popstate 和服务端 fallback 是关键。
