前端路由可通过History API实现，利用pushState修改URL并添加历史记录，结合onpopstate监听前进后退操作，通过render函数动态更新页面内容，实现无刷新导航；需注意服务器配置fallback以支持直接访问子路由。
前端路由切换可以通过浏览器的 History API 实现，无需依赖框架。利用 history.pushState() 和监听 popstate 事件，就能在不刷新页面的情况下更新视图，模拟多页应用的导航体验。
History API 核心方法
HTML5 提供了 History API 来操作浏览器会话历史。关键方法包括：
- history.pushState(state, title, url)：添加一条新记录到历史栈，并改变当前 URL（不会触发页面刷新）
- history.replaceState(state, title, url)：替换当前历史记录条目
- window.onpopstate：当用户点击前进/后退按钮时触发
实现简单前端路由
以下是一个纯 HTML + JavaScript 的简单路由示例：
<!DOCTYPE html>
<html>
<head>
<title>简易前端路由</title>
</head>
<body>
<nav>
<a href="/home" onclick="navigate(event)">首页</a>
<a href="/about" onclick="navigate(event)">关于</a>
<a href="/contact" onclick="navigate(event)">联系</a>
</nav>
<div id="content"></div>
<script>
// 页面内容映射
const routes = {
'/home': '<h1>这是首页</h1>',
'/about': '<h1>这是关于页</h1>',
'/contact': '<h1>这是联系页</h1>'
};
// 导航函数
function navigate(event) {
event.preventDefault(); // 阻止默认跳转
const url = event.target.getAttribute('href');
history.pushState({}, '', url); // 更新URL
render(url);
}
// 渲染对应页面
function render(url) {
document.getElementById('content').innerHTML = routes[url] || '<h1>404 页面未找到</h1>';
}
// 监听浏览器前进后退
window.onpopstate = function() {
render(location.pathname);
};
// 初始化页面加载
window.onload = function() {
render(location.pathname || '/home');
};
</script>
</body>
</html>
关键点说明
这段代码的核心逻辑是：
立即学习“前端免费学习笔记（深入）”；
- 点击链接时调用 navigate 函数，阻止默认行为，使用 pushState 修改 URL 并加入历史记录
- 通过 render 函数根据当前路径显示对应内容
- 绑定 onpopstate 事件，在用户点击前进/后退时重新渲染对应页面
- 页面首次加载时根据当前 pathname 渲染初始内容
注意事项
使用 History API 时需注意：
- 服务器配置需支持所有路由指向同一个 HTML 文件（如 SPA 常见的 fallback 配置）
- 直接访问子路由时，服务端不能返回 404
- pushState 不触发 popstate，只有用户操作浏览器导航键才会触发
- state 对象可用于传递少量页面状态信息
基本上就这些。不复杂但容易忽略细节。只要理解 pushState 改变 URL 而不刷新，popstate 响应导航动作，就能自己写出轻量路由系统。
