单页应用通过History API实现路由，利用pushState和replaceState修改URL不刷新页面，结合popstate监听浏览器导航，动态更新DOM内容。示例中封装Router类管理路径与处理函数，支持页面跳转与历史记录控制；需服务器配置fallback至index.html，并在JS中添加404处理，确保路由正确响应。
JavaScript 可以通过 History API 操作浏览器的历史记录，从而在不刷新页面的情况下实现 URL 的变化与页面内容的更新。这正是单页应用（SPA）实现前端路由的核心机制。
使用 History API 控制浏览历史
现代浏览器提供了 pushState()、replaceState() 和 popstate 事件来操作和监听路由变化。
- history.pushState(state, title, url)：向历史记录添加一条新记录，同时改变当前 URL，但不会触发页面加载。
- history.replaceState(state, title, url)：替换当前历史记录中的条目，不会新增记录。
- window.onpopstate：当用户点击“前进”或“后退”按钮时触发，用于响应浏览器导航行为。
示例：
// 添加新状态
history.pushState({ page: 'home' }, '', '/home');
// 替换当前状态
history.replaceState({ page: 'about' }, '', '/about');
监听路由变化并渲染对应内容
通过监听 popstate 事件，可以在用户使用浏览器导航时动态切换视图。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('popstate', (event) => {
const path = window.location.pathname;
navigate(path);
});
function navigate(path) {
if (path === '/home') {
document.getElementById('app').innerHTML = '
首页
';
} else if (path === '/about') {
document.getElementById('app').innerHTML = '关于页
';
}
}调用 navigate 函数根据路径更新页面内容，实现无刷新跳转。
封装简易前端路由器
可以将路由逻辑封装成一个简单的 Router 类，便于管理。
class Router {
constructor() {
this.routes = {};
window.addEventListener('popstate', () => {
this.navigate(window.location.pathname);
});
}
addRoute(path, handler) {
this.routes[path] = handler;
}
navigate(path) {
history.pushState({}, '', path);
const handler = this.routes[path];
if (handler) handler();
}
start() {
this.navigate(window.location.pathname || '/');
}
}
// 使用示例
const router = new Router();
router.addRoute('/', () => {
document.getElementById('app').innerHTML = '
主页
';
});
router.addRoute('/user', () => {
document.getElementById('app').innerHTML = '用户中心
';
});
router.start();// 页面内跳转（模拟点击链接）
document.getElementById('to-user').addEventListener('click', (e) => {
e.preventDefault();
router.navigate('/user');
});
处理直接访问和 404 路由
单页应用的所有路由都应指向同一个 HTML 文件（通常是 index.html），这就需要服务器配置支持。例如在 Nginx 中：
location / {
try_files $uri $uri/ /index.html;
}
此外，在 JS 路由中可添加默认 404 处理：
navigate(path) {
const handler = this.routes[path] || (() => {
document.getElementById('app').innerHTML = '404 - 页面不存在
';
});
handler();
}
基本上就这些。利用 History API 配合事件监听和 DOM 更新，就能实现一个轻量且实用的单页应用路由系统。关键是避免页面刷新的同时保持 URL 与界面状态同步。
