单页应用通过前端路由实现无刷新导航，核心是利用JavaScript监听URL变化并动态渲染视图。前端路由基于两种模式：Hash模式通过监听hashchange事件，利用#后内容切换视图，兼容性好但URL不美观；History模式使用pushState和popstate实现更干净的URL，需服务器配置支持。简易实现可监听load和popstate事件，根据路径渲染对应内容。现代框架如React、Vue提供成熟路由库，封装底层逻辑，支持声明式、嵌套路由等高级功能，提升开发效率。
单页应用（SPA）之所以能在一个页面内实现多页面的导航体验，核心就在于前端路由。JavaScript路由让浏览器在不刷新页面的情况下切换视图，保持用户体验流畅。它通过监听URL的变化来加载对应的内容模块，而不会向服务器请求全新的页面。
前端路由的基本原理
传统的多页应用每次跳转都会请求服务器返回新的HTML页面。而单页应用只加载一次主页面（通常是index.html），后续的页面切换由JavaScript动态完成。
前端路由的关键在于：
- 捕获用户的导航行为（如点击链接）
- 修改浏览器地址栏的URL而不触发页面刷新
- 根据当前路径渲染对应的视图组件
- 支持浏览器前进后退操作
两种实现模式：Hash 和 History
目前主流的前端路由实现依赖于两种浏览器API机制：Hash模式和History模式。
立即学习“Java免费学习笔记（深入）”；
Hash 模式
利用URL中#后面的部分（即hash值）来模拟路由路径。hash变化不会导致页面重新加载，且不会发送到服务器。
例如：http://example.com/#/home 和 http://example.com/#/about
监听方式：
window.addEventListener('hashchange', () => {
const path = window.location.hash.slice(1); // 去掉 #
router(path);
});优点是兼容性好，不需要服务器配置；缺点是URL不够美观，带#号。
History 模式
使用 HTML5 的 History API（pushState、replaceState）来修改URL并管理历史记录。
例如：http://example.com/home
示例代码：
window.addEventListener('popstate', () => {
router(window.location.pathname);
});
function navigateTo(path) {
window.history.pushState({}, '', path);
router(path);
}
这种方式URL更干净，但需要服务器配合，确保所有路由都指向index.html，否则刷新会404。
简易路由实现示例
可以自己写一个极简的前端路由器：
const routes = {
'/home': '首页
',
'/about': '关于页
'
};
function router() {
const path = window.location.pathname || '/home';
document.getElementById('app').innerHTML = routes[path] || '
404
';
}// 初始化
window.addEventListener('load', router);
window.addEventListener('popstate', router);
// 导航函数
function goTo(path) {
window.history.pushState({}, '', path);
router();
}
页面中用 首页 来触发跳转。
现代框架中的路由
实际开发中通常使用成熟的路由库：
这些库封装了底层细节，提供声明式路由、嵌套路由、路由守卫、懒加载等高级功能，大幅提升开发效率。
基本上就这些。理解JavaScript路由的核心机制，有助于更好地掌握单页应用的工作方式。
