17370845950

前端路由通过浏览器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(); // 初始化

这五五行代码就体现了路由的核心：监听变化 → 获取路径 → 执行对应逻辑。