17370845950

单页应用（SPA）路由依赖history API或hash实现无刷新切换：history.pushState修改URL不重载页面，需服务端fallback；hash通过location.hash兼容旧浏览器但SEO差；必须用popstate/hashchange事件监听导航，不能仅靠pathname轮询。

单页应用（SPA）的核心是不刷新页面的前提下切换视图，这依赖前端路由。JavaScript 本身没有内置路由，必须靠开发者用 history API 或 hash 变化来模拟路由行为。

用 history.pushState 实现无刷新跳转

现代 SPA 路由的主流方式是基于 HTML5 的 history API，它允许修改 URL 且不触发页面重载。

• pushState() 添加新历史记录，replaceState() 替换当前记录，两者都不刷新页面
• 必须配合 popstate 事件监听浏览器前进/后退操作
• 服务端需配置 fallback：所有非 API 路径都返回 index.html，否则直接访问 /user/123 会 404
• 注意：URL 必须是同源的，不能跨域调用 pushState

history.pushState({ page: 'about' }, '', '/about');
window.addEventListener('popstate', (event) => {
  renderPage(event.state.page);
});

用 location.hash 实现兼容性更强的路由

在不支持 history API 的旧浏览器（如 IE9）中，hash 是唯一可靠方案；即使在现代项目里，它也因无需服务端配合而适合快速原型。

• URL 变化仅限 # 后部分，例如 example.com/#/settings
• 监听 hashchange 事件即可响应路由变化
• 不会向服务端发送请求，天然避免 404 问题
• 缺点：URL 不够美观，SEO 友好性差（搜索引擎曾长期忽略 hash 内容）

window.addEventListener('hashchange', () => {
  const path = location.hash.slice(1) || '/';
  renderPage(path);
});
// 触发跳转
location.hash = '#/profile';

为什么不能只靠 location.pathname 监听？

直接读取 location.pathname 并轮询或绑定 click 事件是常见误区——它无法捕获用户点击地址栏回车、浏览器前进/后退、或 JS 调用 history.back() 等行为。

• pathname 是只读属性，无法监听变更
• 仅靠拦截 点击，漏掉所有非点击触发的导航（比如键盘 Alt+←）
• 必须使用 popstate 或 hashchange 这类原生事件，它们才是浏览器真正发出的路由变更信号

手写简单路由时容易忽略的边界情况

哪怕只是实现一个三行路由，以下几点常导致白屏或死循环：

• 未处理初始加载：页面首次打开时，需主动根据当前 location 执行一次 renderPage
• 未防止重复渲染：popstate 在某些浏览器中会触发两次（如 Chrome 中从标签页切回）
• 未清理事件监听：单页内多次初始化路由实例，可能叠加多个 popstate 监听器
• 路径匹配逻辑太粗糙：比如用 includes('/user') 匹配，会导致 /users 也被误判

真实项目中，这些细节比路由模式选择更消耗调试时间。