前端路由通过History API实现无刷新视图切换，利用pushState、replaceState和onpopstate控制浏览器历史与URL变化，配合路由映射和动态渲染，在单页应用中模拟多页面导航。
前端路由的核心在于不刷新页面的情况下实现视图的切换，依赖的是浏览器提供的 History API。它让单页应用（SPA）能够模拟多页面的导航体验，同时保持良好的用户体验和性能。
前端路由的基本原理
在传统的多页应用中，每次跳转都会向服务器请求一个新的 HTML 页面。而前端路由通过监听 URL 的变化，在不重新加载页面的前提下，动态地渲染不同的内容。
实现的关键点包括：
- 拦截用户的导航行为，比如点击链接
- 根据 URL 更新页面状态或组件
- 保持浏览器历史记录可用，支持前进后退
- 可选地与服务端配合处理直接访问路由的情况
History API 的核心方法
HTML5 提供了 History 接口，使得开发者可以操作浏览器会话历史。前端路由主要使用以下三个方法：
立即学习“前端免费学习笔记（深入）”；
- history.pushState()：添加一条新的历史记录，并更新当前 URL，但不会触发页面刷新
- history.replaceState()：修改当前历史记录条目，不会新增记录
- window.onpopstate：监听浏览器前进、后退等导致 history 变化的事件
例如，当用户点击“关于”页面时，可以通过 pushState 将 URL 改为 /about，然后触发对应的视图更新。
一个简易的前端路由实现
基于 History API，可以手动实现一个轻量级的路由系统：
const routes = {};
// 注册路由
function route(path, callback) {
routes[path] = callback;
}
// 跳转并触发对应回调
function navigate(path) {
history.pushState({}, '', path);
if (routes[path]) routes[path]();
}
// 监听回退/前进
window.onpopstate = () => {
const path = window.location.pathname;
if (routes[path]) routes[path]();
};
// 初始化默认路由
window.route = route;
window.navigate = navigate;
使用方式如下：
route('/', () => {
document.body.innerHTML = '首页
';
});
route('/user', () => {
document.body.innerHTML = '用户页
';
});
navigate('/user'); // 页面显示“用户页”，URL变为/user
与 Hash 路由的区别
除了基于 History API 的路由，还有一种常见的做法是使用 URL 的 hash（如 #/home）。Hash 变化不会触发页面请求，且无需服务端配合，兼容性更好。
但 History 模式更美观，URL 更干净。使用 History 模式时需要注意：如果用户直接访问某个路由路径，服务端必须返回同一个入口文件（如 index.html），否则会出现 404 错误。
基本上就这些。掌握 History API 是理解现代前端框架（如 Vue Router、React Router）工作原理的基础。不复杂但容易忽略细节，比如状态管理和 replaceState 的使用场景。
