前端路由通过浏览器API实现URL变化但不刷新页面，分为Hash模式（利用#后内容）和History模式（使用pushState等），需匹配路径、触发渲染、同步状态，并要求服务端对History模式做404回退配置。
前端路由不依赖服务端跳转，而是通过浏览器 API 操作 URL 并动态切换页面内容。核心在于“URL 变了，但页面不刷新”，用户感知是跳转，实际只是局部更新。
前端路由的两种实现方式
现代前端框架（如 React、Vue）的路由库底层都基于这两种原生机制：
-
Hash 模式：利用 URL 中 # 后面的部分（即 hash 值），例如
/#/user。hash 变化不会触发页面重载，且可通过window.location.hash读取，监听hashchange事件即可响应路由变化。 -
History 模式：基于 HTML5 的
history.pushState()和history.replaceState()方法，能修改 URL 路径（如/user）而不刷新页面；配合popstate事件监听浏览器前进/后退操作。
前端路由的关键工作流程
一个最小可行的前端路由需完成三件事：
-
匹配路径：将当前 URL（或 hash）与预设的路由规则（如
/user/:id）比对，提取参数。 -
触发渲染：根据匹配结果，加载对应组件或模板，插入到页面指定容器（如
）中。 -
同步状态：用户点击链接时，不使用
默认跳转（会刷新），而是调用pushState或修改location.hash，再手动触发匹配和渲染。
为什么需要处理服务端兼容性？
Hash 模式天然无服务端问题，因为 # 不会发给服务器；History 模式则不同——当用户直接访问 https://site.com/user 或刷新页面时，请求会到达服务端。若服务端未配置，会返回 404。
立即学习“Java免费学习笔记（深入）”；
解决方法是：服务端对所有前端路由路径（如 /user、/post/*）统一返回 index.html，让前端路由接管后续渲染。常见做法包括：
- Nginx 配置
try_files $uri $uri/ /index.html; - Vercel/Netlify 等平台默认支持 SPA 回退规则
- Express 中用
app.get('*', (req, res) => res.sendFile(indexHtml))
简单手写一个 Hash 路由示例
便于理解本质：
const routes = {
'#/': () => console.log('首页'),
'#/user': () => console.log('用户页'),
'#/post': () => console.log('文章页')
};
function router() {
const hash = window.location.hash || '#/';
if (routes[hash]) routes[hash]();
}
window.addEventListener('hashchange', router);
router(); // 初始化
这五五行代码就体现了路由的核心：监听变化 → 获取路径 → 执行对应逻辑。
