JavaScript路由系统实现_技术教程_奈瑶·映南科技互联网学院

前端路由通过监听URL变化实现无刷新视图切换，核心原理是利用Hash模式或History API。1. Hash路由通过location.hash读取#后内容，兼容性好，无需服务器支持；示例中定义routes对象映射hash值到渲染函数，监听hashchange事件触发对应页面渲染，并在初始化时设置默认hash。2. History API使用pushState修改URL不刷新页面，popstate监听浏览器前进后退，通过拦截链接点击事件阻止默认跳转并调用navigate函数更新状态和视图。3. 动态路由通过正则匹配路径参数，如/user/123提取ID，matchRoute函数遍历dynamicRoutes进行正则匹配并执行对应处理器。4. 最终结合静态与动态路由完成404处理，手动实现有助于理解React Router等库的工作机制。

前端路由系统让单页应用（SPA）可以在不刷新页面的情况下切换视图，JavaScript 路由是实现这一功能的核心。现代框架如 React、Vue 都内置了路由机制，但理解如何用原生 JavaScript 实现一个简易的路由系统，有助于深入掌握其原理。

基于 URL 的路由监听

前端路由依赖浏览器的 History API 或 hash 模式来监听 URL 变化，无需请求服务器即可更新界面。

使用 Hash 路由：通过 URL 中的 # 后面的部分（hash）来识别不同视图，兼容性好，不需要服务器支持。

示例代码：

const routes = {
  '#/': () => render('首页内容'),
  '#/about': () => render('关于页面'),
  '#/user': () => render('用户中心')
};
function render(content) {
document.getElementById('app').innerHTML = content;
}
window.addEventListener('hashchange', () => {
const hash = location.hash;
if (routes[hash]) {
routes[hash]();
} else {
render('404 页面未找到');
}
});
// 初始化默认页面
if (!location.hash) {
location.hash = '#/';
} else {
const hash = location.hash;
if (routes[hash]) routes[hash]();
}

使用 History API 实现无刷新跳转

HTML5 提供了 pushState 和 replaceState 方法，可以修改 URL 而不触发页面刷新，同时配合 popstate 事件监听后退/前进操作。

示例代码：

const routeMap = {
  '/': () => render('主页'),
  '/products': () => render('商品列表'),
  '/cart': () => render('购物车')
};
function navigate(path) {
window.history.pushState({}, '', path);
renderView(path);
}
function renderView(path) {
if (routeMap[path]) {
routeMap[path]();
} else {
render('404 Not Found');
}
}
window.addEventListener('popstate', () => {
renderView(location.pathname);
});
// 绑定链接点击事件，防止默认跳转
document.addEventListener('click', e => {
if (e.target.tagName === 'A' && e.target.href.startsWith(location.origin)) {
e.preventDefault();
navigate(e.target.pathname);
}
});
// 初始化当前路径
renderView(location.pathname);

动态路由与参数解析

真实项目中常需要处理带参数的路径，例如 /user/123。可通过正则匹配提取动态片段。

示例：支持占位符的简单动态路由

const dynamicRoutes = [
  { path: /^\/user\/(\d+)$/, handler: (id) => render(`用户 ID：${id}`) },
  { path: /^\/post\/([a-z-]+)$/, handler: (slug) => render(`文章：${slug}`) }
];
function matchRoute(path) {
for (const route of dynamicRoutes) {
const match = route.path.exec(path);
if (match) {
route.handler(...match.slice(1));
return true;
}
}
return false;
}
// 使用时
const path = location.pathname;
if (!routeMap[path] && !matchRoute(path)) {
render('404');
}