前端路由通过Hash或History模式实现SPA页面切换。Hash模式兼容性好但URL不美观；History模式URL简洁利于SEO，但需服务器配置支持。
前端路由是单页应用（SPA）的核心机制之一，它允许在不刷新页面的情况下实现视图切换和URL变化。相比传统的多页应用，SPA通过前端路由管理不同页面的展示，提升用户体验。目前主流的前端路由实现方式有两种：Hash模式和History模式。
Hash 模式原理
Hash 模式利用 URL 中的 # 符号后的部分（即 hash 值）来控制路由跳转，hash 的变化不会触发页面重新加载，且不会发送到服务器。
其核心原理是监听 window.onhashchange 事件，当 hash 改变时，根据新的 hash 值渲染对应的内容。
示例代码：
立即学习“Java免费学习笔记（深入）”；
// 监听 hash 变化
window.addEventListener('hashchange', () => {
const hash = window.location.hash.slice(1) || '/';
renderPage(hash);
});
function renderPage(path) {
const app = document.getElementById('app');
switch(path) {
case '/home':
app.innerHTML = '<h1>首页</h1>';
break;
case '/about':
app.innerHTML = '<h1>关于页</h1>';
break;
default:
app.innerHTML = '<h1>404</h1>';
}
}
优点：
- 兼容性好，支持低版本浏览器
- 不需要服务器配置，所有路径都指向同一 HTML 文件
缺点：
- URL 中带有 #，不够美观
- 不利于 SEO（搜索引擎优化）
History 模式原理
History 模式基于 HTML5 的 History API（pushState、replaceState）实现，可以操作浏览器历史记录并修改 URL 而不引起页面刷新。
通过 window.onpopstate 监听浏览器前进后退操作，结合 pushState 修改地址栏路径。
示例代码：
立即学习“Java免费学习笔记（深入）”；
// 路由跳转函数
function navigateTo(path) {
window.history.pushState({}, '', path);
renderPage(path);
}
// 监听浏览器回退/前进
window.addEventListener('popstate', () => {
renderPage(window.location.pathname);
});
// 初始化页面
navigateTo(window.location.pathname || '/');
优点：
- URL 干净，无 #，更接近传统网站路径
- 利于 SEO，便于服务端渲染配合
缺点：
- 需要服务器支持，访问任意路由时需返回 index.html
- 配置相对复杂，部署时需额外处理
两种模式对比与选择
Hash 模式适合对 SEO 要求不高、追求快速上线和兼容性的项目；History 模式更适合追求良好用户体验和 SEO 的正式产品。
现代前端框架如 Vue Router 和 React Router 都同时支持两种模式，开发者可通过配置轻松切换。
Vue Router 示例：
const router = new VueRouter({
mode: 'history', // 或 'hash'
routes: [...]
});
基本上就这些。理解前端路由的底层机制有助于更好地掌握 SPA 开发逻辑，也能在遇到路由问题时快速定位原因。
