单页应用无刷新跳转的核心是前端路由，通过监听URL变化并动态更新视图实现。主要采用hash模式和history模式：hash模式利用#后的锚点变化触发hashchange事件，兼容性好且无需后端配合；history模式使用pushState和popstate实现更美观的URL路径，需后端支持避免404。前者适合快速开发，后者提升用户体验与SEO，技术选型应根据项目需求与部署环境决定。
单页应用（SPA）之所以能实现无刷新跳转，核心在于前端路由。它让浏览器在不重新请求服务器的情况下切换视图，提升用户体验。前端路由主要有两种实现方式：hash 模式和 history 模式。
前端路由的基本原理
传统多页应用每次跳转都会向服务器发起新请求，页面整体刷新。而单页应用只加载一次 HTML，后续的页面变化由 JavaScript 动态更新 DOM 实现。
前端路由的核心是监听 URL 的变化，并根据不同的路径渲染对应的视图组件，同时避免页面刷新。
要做到这一点，需要两个关键机制：
立即学习“Java免费学习笔记（深入）”；
- 监听 URL 变化：通过事件监听捕捉用户导航行为
- 响应式视图更新：根据当前路径匹配并渲染对应内容
Hash 模式实现原理
URL 中 # 后面的部分称为 hash，例如 http://example.com/#/home，hash 的改变不会触发页面刷新，也不会发送请求到服务器，但会触发 window 对象的 hashchange 事件。
利用这一特性，可以实现简单的前端路由：
// 路由映射表
const routes = {
'#/': '首页',
'#/home': '首页',
'#/about': '关于页'
};
// 初始渲染
function onHashChange() {
const path = window.location.hash || '#/';
document.getElementById('app').innerText = routes[path] || '404';
}
// 监听 hash 变化
window.addEventListener('hashchange', onHashChange);
// 首次加载时也执行一次
onHashChange();
这种方式兼容性好，支持低版本浏览器，无需后端配合，适合快速搭建或对 SEO 要求不高的项目。
History 模式实现原理
HTML5 提供了 history.pushState() 和 replaceState() 方法，可以在不刷新页面的前提下修改 URL，并且可以通过 popstate 事件监听前进后退操作。
与 hash 不同，history 模式使用的是标准路径，如 /home、/about，更美观且接近传统网站体验。
// 路由表
const routes = {
'/': '首页',
'/home': '首页',
'/about': '关于页'
};
// 渲染函数
function render() {
const path = window.location.pathname;
document.getElementById('app').innerText = routes[path] || '404';
}
// 拦截链接点击，使用 pushState
document.addEventListener('click', e => {
if (e.target.tagName === 'A' && e.target.href.startsWith(window.location.origin)) {
e.preventDefault();
const href = e.target.getAttribute('href');
window.history.pushState(null, '', href);
render();
}
});
// 监听浏览器前进后退
window.addEventListener('popstate', render);
// 首次加载
render();
注意：history 模式需要后端配置支持。当用户直接访问 /home 时，服务器必须返回 index.html，否则会 404。常见做法是将所有路由指向同一个入口文件。
两种模式对比与选择
hash 模式基于锚点，天然不会触发请求，开发阶段零配置，适合内部系统或原型开发；history 模式 URL 更干净，用户体验更好，适合正式上线项目。
选择建议：
- 若项目对 SEO 敏感或追求完整语义化 URL，优先选 history 模式
- 若部署环境无法配置服务器重定向，或需兼容老旧浏览器，可选用 hash 模式
基本上就这些。前端路由本质是在浏览器端模拟导航行为，通过 JS 控制视图切换。理解 hash 和 history 的差异，有助于在实际项目中做出合理技术选型。
