前端路由通过浏览器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(); // 初始化这五五行代码就体现了路由的核心：监听变化 → 获取路径 → 执行对应逻辑。