前端路由通过History API或Hash模式实现无刷新视图切换。1. History API利用pushState、replaceState修改URL并监听popstate事件响应浏览器前进后退；2. Hash模式通过监听hashchange事件，基于URL中#后的内容切换视图，兼容性好且不触发页面刷新；3. 框架如React、Vue封装路由库，底层仍依赖上述机制，配合服务端返回统一入口文件避免404，实现单页应用的动态渲染。
前端路由的实现原理主要依赖于浏览器提供的历史记录机制，让单页应用（SPA）在不刷新页面的前提下实现视图切换。核心目标是监听 URL 变化并响应式地渲染对应内容，而不会向服务器发起新页面请求。
基于 History API 实现
现代前端路由大多使用 HTML5 的 History API，它允许在不刷新页面的情况下操作浏览器历史记录。
关键方法包括：
- history.pushState()：添加一条新的历史记录，并更新 URL
- history.replaceState()：替换当前历史记录条目
- popstate 事件：当用户点击前进/后退按钮时触发
示例代码：
立即学习“Java免费学习笔记（深入）”；
const routeChange = () => {const path = window.location.pathname;
if (path === '/') {
renderHome();
} else if (path === '/about') {
renderAbout();
}
};
// 监听浏览器导航行为
window.addEventListener('popstate', routeChange);
// 路由跳转封装
const navigateTo = (path) => {
window.history.pushState({}, '', path);
routeChange();
};
// 绑定链接点击事件防止默认跳转
document.querySelectorAll('a[data-link]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
navigateTo(link.getAttribute('href'));
});
});
基于 Hash 模式实现
在不支持 History API 或需要兼容旧浏览器时，可使用 URL 中的 hash（#）部分来实现路由。hash 改变不会触发页面刷新，且会触发 hashchange 事件。
特点：
- URL 格式如：example.com/#/home
- hash 变化不会发送请求到服务器
- 简单易用，兼容性好
实现方式：
window.addEventListener('hashchange', () => {const hash = window.location.hash.slice(1) || '/';
if (hash === '/home') {
renderHome();
} else if (hash === '/profile') {
renderProfile();
}
});
// 初始化加载
window.location.hash || (window.location.hash = '/');
与框架的结合方式
主流前端框架如 React、Vue 都封装了路由库（如 React Router、Vue Router），但底层仍基于上述两种模式。
开发者无需手动监听事件，而是通过声明式组件配置路径映射。框架内部会：
- 拦截链接跳转
- 注册路由变化监听器
- 动态加载并渲染对应组件
服务端需配合返回统一入口文件（如 index.html），避免刷新 404 错误。
基本上就这些。理解 History 和 Hash 两种机制，就能明白前端路由如何在无刷新下实现页面切换。实际开发中虽使用高级库，但原理一致。
