单页应用通过前端路由实现无刷新切换，核心是利用History API监听URL变化并动态渲染视图。
单页应用（SPA）之所以能实现页面无刷新切换，核心在于前端路由的控制。它通过监听 URL 的变化来动态加载或渲染对应的内容，而无需向服务器请求整个新页面。在 JavaScript 中，这主要依赖于浏览器提供的 History API 来完成。
前端路由的基本原理
传统多页应用每次跳转都会请求服务器返回新的 HTML 页面。而 SPA 只加载一次主页面，后续的视图切换由 JavaScript 动态处理。前端路由的作用就是根据不同的 URL 显示不同的组件或视图。
实现的关键点在于：
- 拦截用户的导航行为，避免默认的页面跳转
- 监听 URL 的变化
- 根据当前路径匹配对应的视图逻辑
- 更新页面内容，同时保持浏览器历史可回退
History API 的作用与使用
HTML5 引入了 History API，让开发者可以更安全地操作浏览器的历史记录，同时改变 URL 而不触发页面刷新。这是现代前端路由的基础。
立即学习“Java免费学习笔记（深入）”；
主要方法包括：
- history.pushState(state, title, url)：向历史栈添加一条新记录，并更新当前 URL
- history.replaceState(state, title, url)：替换当前历史记录，不会新增条目
- window.onpopstate：监听前进/后退等历史导航事件
例如：
// 添加新状态，URL 变为 /page1，但不刷新页面
history.pushState({ page: 'page1' }, '', '/page1');
// 监听浏览器后退按钮
window.onpopstate = function(event) {
if (event.state) {
renderPage(event.state.page);
}
};
Hash 路由 vs History 路由
除了基于 History API 的模式，还有一种传统的实现方式是 Hash 路由。
- Hash 路由：利用 URL 中 # 后的部分（如 #/home）。hash 改变不会触发页面请求，可通过监听 hashchange 事件实现跳转
- History 路由：使用 pushState 和 popstate 实现更“干净”的 URL（如 /home），但需要服务器配合，防止直接访问时 404
Hash 模式兼容性更好，适合静态文件部署；History 模式更美观，接近传统网站体验。
简易前端路由实现示例
一个基础的 History 路由可以这样写：
class Router {
constructor() {
this.routes = {};
window.onpopstate = (e) => {
this.navigate(location.pathname);
};
}
addRoute(path, callback) {
this.routes[path] = callback;
}
navigate(path) {
history.pushState({}, '', path);
if (this.routes[path]) {
this.routes[path]();
}
}
init() {
this.navigate(location.pathname || '/');
}
}
// 使用
const router = new Router();
router.addRoute('/home', () => console.log('显示首页'));
router.addRoute('/about', () => console.log('显示关于页'));
router.init();
基本上就这些。前端路由的本质是用 JS 控制导航与视图映射，结合 History API 实现流畅的用户体验。不复杂但容易忽略细节，比如服务器配置、状态保存和 SEO 处理。
