如何构建单页应用使用JavaScript_JavaScript前端路由的实现方式有哪些

夜晨 2026-01-07 00:00:00 次阅读

单页应用（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';