使用JavaScript实现一个简单的路由_js SPA-js教程-PHP中文网

使用JavaScript实现一个简单的路由_js SPA

夢幻星辰

发布： 2025-11-03 17:11:02

原创

802人浏览过

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

使用javascript实现一个简单的路由_js spa

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

1. 基于 URL Hash 的简单路由

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

示例结构：

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

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

HTML 模板：

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

查看详情

<nav>
  <a href="#/home">首页</a>
  <a href="#/about">关于</a>
  <a href="#/contact">联系</a>
</nav>
<main id="app"></main>

登录后复制

JavaScript 路由逻辑：

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

登录后复制

2. 使用路由表简化管理

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

const routes = {
  '/home': () => '<h1>这是首页</h1>',
  '/about': () => '<h1>这是关于页</h1>',
  '/contact': () => '<h1>这是联系页</h1>',
  '/': () => '<h1>这是首页</h1>'
};
<p>function render() {
const app = document.getElementById('app');
const path = window.location.hash.slice(1) || '/';
const routeHandler = routes[path];</p><p>app.innerHTML = routeHandler ? routeHandler() : '<h1>404 - 页面未找到</h1>';
}</p><p>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) => `<h1>用户 ID：${id}</h1>` }
];
<p>function matchDynamicRoute(path) {
for (const route of dynamicRoutes) {
const match = path.match(route.path);
if (match) {
return route.handler(match[1]);
}
}
return null;
}</p><p>// 在 render 中加入：
// const dynamicContent = matchDynamicRoute(path);
// if (dynamicContent) {
//   app.innerHTML = dynamicContent;
//   return;
// }

登录后复制

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

以上就是使用JavaScript实现一个简单的路由_js SPA的详细内容，更多请关注php中文网其它相关文章！