JavaScript前端路由核心是监听URL变化不刷新页面，通过Hash模式（hashchange事件）或History模式（pushState+popstate）实现SPA动态更新，首次加载后由JS接管导航与视图渲染。
JavaScript 中实现路由功能，核心是监听 URL 变化但不刷新页面，再根据路径匹配对应视图或组件。这正是单页面应用（SPA）的底层原理：用 JS 动态替换页面局部内容，让整个应用像“一个页面”一样运行。
前端路由的两种主流实现方式
现代 SPA 路由主要依赖浏览器原生 API，无需后端参与跳转：
-
Hash 模式：利用
window.location.hash和hashchange事件。URL 形如example.com/#/home，# 后面的变化不会触发页面重载，JS 可监听并响应。 -
History 模式：基于
history.pushState()/replaceState()修改地址栏，配合popstate事件监听前进/后退。URL 更干净（如example.com/home），但需要服务端配合——所有前端路由路径都应返回同一份 HTML，否则直接访问会 404。
手写一个极简的 Hash 路由示例
不用框架也能快速搭出基础路由逻辑：
const routes = {
'/': () => document.getElementById('app').innerHTML = '首页
',
'/about': () => document.getElementById('app').innerHTML = '关于
'
};
function render() {
const path = location.hash.slice(1) || '/';
(routes[path] || routes['/'])();
}
window.addEventListener('hashchange', render);
window.addEventListener('load', render); // 页面首次加载也要渲染
点击链接时用 关于 即可切换，无刷新。
立即学习“Java免费学习笔记（深入）”；
SPA 的本质：一次加载 + 动态更新
单页面应用不是“只有一个 HTML 文件”，而是：
– 首次请求只加载一个 HTML、一份 JS 主程序和必要资源；
– 后续所有“跳转”都是 JS 拦截 URL 变化，决定显示哪个组件、拉取哪些数据、更新哪块 DOM；
– 浏览器历史栈由 JS 维护（pushState 或修改 hash），前进后退也由 JS 响应。
这种模式减少重复请求和白屏，体验接近桌面应用，代价是首屏 JS 包体积较大、SEO 需额外处理（如服务端渲染 SSR）。
基本上就这些。路由是 SPA 的骨架，理解 hash 和 history 的区别与适用场景，比记住某个框架的写法更重要。
