javascript路由是什么_如何实现单页面应用_技术教程

JavaScript路由通过监听URL变化动态切换视图而不刷新页面，核心是pushState/replaceState修改地址栏+popstate/hashchange监听导航，Hash模式兼容性好，HTML5模式需服务端fallback配置。

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 模式兼容性好，无需服务端配合，适合快速验证逻辑。关键点：

立即学习“Java免费学习笔记（深入）”；

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

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

真实项目中该选 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 或预渲染补足