前端路由通过监听URL变化实现无刷新视图切换，核心为监听、映射与渲染。采用hash模式兼容性好但URL不美观，History API模式需服务端支持但体验更佳，可封装类或使用Vue/React路由方案。
前端路由是单页应用（SPA）的核心机制之一，它允许在不刷新页面的前提下实现视图的切换与URL的变化。JavaScript路由系统通过监听URL变化来动态加载内容，提升用户体验。下面介绍其基本原理和几种常见的实现方式。
前端路由的基本原理
传统多页应用每次跳转都会向服务器请求新页面，而单页应用只加载一次HTML，后续的页面切换由JavaScript控制。前端路由的核心在于：
- 监听URL变化：在不重新请求页面的情况下感知路径变更
- 映射路由规则：将不同的路径对应到特定的视图或组件
- 更新界面内容：根据当前路径渲染对应的模块
整个过程由JavaScript接管浏览器的导航行为，实现局部更新。
实现方案一：基于hash模式
利用URL中#后面的部分（hash）不会触发页面刷新的特性，是最简单兼容的实现方式。
立即学习“Java免费学习笔记（深入）”；
当hash改变时，window对象会触发hashchange事件，可在此事件中处理路由逻辑。
window.addEventListener('hashchange', () => {
const path = location.hash.slice(1) || '/';
router(path);
});
function router(path) {
const view = document.getElementById('app');
if (path === '/') {
view.innerHTML = '<h1>首页</h1>';
} else if (path === '/about') {
view.innerHTML = '<h1>关于页</h1>';
} else {
view.innerHTML = '<h1>404</h1>';
}
}
优点是兼容性好，无需服务器支持；缺点是URL不够美观，且#后的内容不会发送到服务器。
实现方案二：基于History API
HTML5提供的History API（如pushState、replaceState）允许操作浏览器历史记录并修改URL，且不触发页面刷新。
通过popstate事件监听前进后退操作：
window.addEventListener('popstate', () => {
const path = location.pathname;
handleRoute(path);
});
function navigateTo(path) {
history.pushState({}, '', path);
handleRoute(path);
}
function handleRoute(path) {
const app = document.getElementById('app');
switch(path) {
case '/':
app.innerHTML = '<h1>主页</h1>';
break;
case '/user':
app.innerHTML = '<h1>用户中心</h1>';
break;
default:
app.innerHTML = '<h1>页面不存在</h1>';
}
}
// 模拟点击导航
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
navigateTo(e.target.getAttribute('href'));
});
});
这种方式URL更干净，接近传统网站体验，但需要服务器配置支持，避免刷新404错误。
简易路由类封装示例
可以将路由逻辑封装成一个轻量类，便于复用：
class SimpleRouter {
constructor() {
this.routes = {};
this._init();
}
add(path, callback) {
this.routes[path] = callback;
}
navigate(path) {
history.pushState({}, '', path);
this._route();
}
_init() {
window.addEventListener('popstate', () => this._route());
// 首次加载匹配当前路径
window.addEventListener('load', () => this._route());
}
_route() {
const path = location.pathname;
const route = this.routes[path] || this.routes['*'];
if (route) route();
}
}
// 使用
const router = new SimpleRouter();
router.add('/', () => {
document.getElementById('app').innerHTML = '<h1>首页</h1>';
});
router.add('/list', () => {
document.getElementById('app').innerHTML = '<h1>列表页</h1>';
});
router.add('*', () => {
document.getElementById('app').innerHTML = '<h1>404 页面未找到</h1>';
});
这种结构清晰，易于扩展中间件、参数解析等功能。
基本上就这些。前端路由本质是JavaScript对URL变化的响应与控制，hash模式适合老项目兼容，History模式更现代但需服务端配合。实际开发中可基于此思路构建自己的路由系统，或使用React Router、Vue Router等成熟方案。关键理解其运行机制，才能更好调试和优化。不复杂但容易忽略细节，比如状态保存、路由守卫等。
