JavaScript路由是什么？单页应用如何实现

JavaScript路由是单页应用（SPA）实现无刷新页面切换的核心技术，它通过history.pushState/replaceState修改URL而不重载页面，并借助popstate或hashchange事件监听导航行为，配合前端路由表动态渲染对应视图；文章深入剖析了Hash模式（兼容性强、零服务端配置）与HTML5 History模式（URL更优雅但需服务端fallback支持）的本质区别、适用场景及常见陷阱，还手写了一个最小可行的Hash路由示例，帮助开发者真正理解路由如何在不依赖框架的前提下工作——无论是部署在静态托管平台还是老旧WebView中，选对模式才能兼顾体验、稳定与可维护性。

JavaScript 路由是单页面应用（SPA）中不刷新页面、仅动态切换视图的核心机制。它靠监听 URL 变化（如 hashchange 或 popstate），匹配路径并渲染对应组件或内容，而非向服务器发起新请求。

为什么不能直接用 window.location.href = '/user'？

那样会触发完整页面跳转，破坏 SPA 的体验和状态。真正的 JS 路由必须：

• 修改浏览器地址栏（但不重载页面）——用 history.pushState() 或修改 location.hash
• 监听用户点击后退/前进按钮 —— 绑定 popstate（HTML5 模式）或 hashchange（Hash 模式）
• 避免服务端 404：若用 HTML5 模式，需服务端配置 fallback（如 Nginx 返回 index.html）

history.pushState() 和 replaceState() 的区别

两者都改变 URL 且不刷新，但行为不同：

• pushState() 向历史栈添加一条新记录，用户可点「后退」回到上一状态
• replaceState() 替换当前历史记录，不会增加栈长度，适合表单提交后跳转避免重复提交
• 两个方法第一个参数是任意 state 对象（可存组件名、查询参数等），第二个是 title（多数浏览器忽略），第三个才是 URL（必须同源）

history.pushState({ page: 'user', id: 123 }, '', '/user/123');
history.replaceState({ page: 'profile' }, '', '/profile');

手写一个最小可用的 Hash 路由

Hash 模式兼容性好，无需服务端配合，适合快速验证逻辑。关键点：

• 用 location.hash 读取当前路径（注意开头的 #）
• 监听 hashchange，不要只依赖初始化时读一次
• 路由表用对象映射，值是渲染函数，避免 eval 或字符串模板
• 确保首次加载时也执行一次匹配（hashchange 不会触发初始状态）

const routes = {
  '#/': () => document.body.innerHTML = '<h2>Home</h2>',
  '#/about': () => document.body.innerHTML = '<h2>About</h2>',
  '#/user': () => document.body.innerHTML = '<h2>User</h2>'
};
<p>function render() {
const hash = location.hash || '#/';
(routes[hash] || routes['#/'])();
}</p><p>window.addEventListener('hashchange', render);
render(); // 首次加载</p>

真实项目中该选 Hash 还是 HTML5 History 模式？

别只看“更现代”——得看部署环境：

• 静态托管（GitHub Pages、Vercel、Netlify）：默认支持 HTML5 模式，但需确认重写规则是否启用（如 /* → /index.html）
• 传统 Nginx/Apache：必须手动配 try_files $uri $uri/ /index.html;，否则子路径刷新直接 404
• 嵌入 WebView 或老旧内嵌浏览器（如某些 Android 系统 WebKit）：Hash 模式更稳，pushState 可能不可用或行为异常
• SEO 需求强：HTML5 模式 URL 更友好，但 SPA 本身仍需 SSR 或预渲染补足

最常被忽略的一点：History 模式下，pushState 改变 URL 后，如果用户手动刷新，服务端必须返回你的入口 HTML；而 Hash 模式下，# 后内容根本不会发给服务端，天然安全。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。