单页应用通过JavaScript路由实现视图切换，利用hash变化监听动态更新内容，支持静态路径映射与动态参数匹配，提升用户体验且无需服务端配合，适用于小型项目。

单页应用（SPA）通过动态更新页面内容，避免整页刷新，提升用户体验。JavaScript 路由是实现 SPA 的核心机制之一。下面介绍如何用原生 JavaScript 实现一个简单的前端路由系统。

1. 基于 URL Hash 的简单路由

利用 URL 中的 hash（#）部分变化不会触发页面刷新的特性，监听 hashchange 事件来切换视图。

示例结构：

立即学习“Java免费学习笔记（深入）”；

• #/home → 显示首页
• #/about → 显示关于页
• #/contact → 显示联系页

HTML 模板：

商易多用户商城

功能介绍：1. 商品出售包含拍卖模式，一口价模式。2. 全套系统采用淘宝网风格，成熟，简洁大方3. 每个商品支持多张图片上传，可自由设定，满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍，或者拍卖自己的商品6. 拥有会员注册，交易提醒，成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能，使得交易安全可*，可信度高8. 拥有安全稳定的用户虚拟币平台，可实现商

下载

JavaScript 路由逻辑：

window.addEventListener('hashchange', function () {
  const app = document.getElementById('app');
  const route = window.location.hash.slice(2); // 去掉 '#/'
if (route === 'home') {
app.innerHTML = '
这是首页
';
} else if (route === 'about') {
app.innerHTML = '
这是关于页
';
} else if (route === 'contact') {
app.innerHTML = '
这是联系页
';
} else {
app.innerHTML = '
404 - 页面未找到
';
}
});
// 初始化默认页面
window.addEventListener('load', function () {
if (!window.location.hash) {
window.location.hash = '#/home';
} else {
// 触发一次 hashchange 以显示初始内容
window.dispatchEvent(new HashChangeEvent('hashchange'));
}
});

2. 使用路由表简化管理

将路径与对应渲染函数映射为对象，便于维护和扩展。

const routes = {
  '/home': () => '
这是首页
',
  '/about': () => '
这是关于页
',
  '/contact': () => '
这是联系页
',
  '/': () => '
这是首页
'
};
function render() {
const app = document.getElementById('app');
const path = window.location.hash.slice(1) || '/';
const routeHandler = routes[path];
app.innerHTML = routeHandler ? routeHandler() : '
404 - 页面未找到
';
}
window.addEventListener('hashchange', render);
window.addEventListener('load', function () {
if (!window.location.hash) {
window.location.hash = '#/';
} else {
render();
}
});

3. 支持动态参数（可选进阶）

如果需要支持类似 #/user/123 的路径，可以加入正则匹配。

const dynamicRoutes = [
  { path: /^\/user\/(\d+)$/, handler: (id) => `
用户 ID：${id}
` }
];
function matchDynamicRoute(path) {
for (const route of dynamicRoutes) {
const match = path.match(route.path);
if (match) {
return route.handler(match[1]);
}
}
return null;
}
// 在 render 中加入：
// const dynamicContent = matchDynamicRoute(path);
// if (dynamicContent) {
//   app.innerHTML = dynamicContent;
//   return;
// }

基本上就这些。使用 hash 路由简单可靠，兼容性好，适合学习和小型项目。实际开发中也可基于 History API 实现无 # 的路由，但需服务端配合。这个基础版本已经能支撑一个轻量级 SPA 的导航需求。