单页应用通过JavaScript路由实现视图切换，利用hash变化监听动态更新内容，支持静态路径映射与动态参数匹配，提升用户体验且无需服务端配合，适用于小型项目。
单页应用（SPA）通过动态更新页面内容，避免整页刷新，提升用户体验。JavaScript 路由是实现 SPA 的核心机制之一。下面介绍如何用原生 JavaScript 实现一个简单的前端路由系统。
1. 基于 URL Hash 的简单路由
利用 URL 中的 hash（#）部分变化不会触发页面刷新的特性，监听 hashchange 事件来切换视图。
示例结构：
立即学习“Java免费学习笔记（深入）”；
#/home → 显示首页#/about → 显示关于页#/contact → 显示联系页
HTML 模板：
一键职达
AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现’一键职达’的便捷体验。
79 查看详情
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 的导航需求。
以上就是使用JavaScript实现一个简单的路由_js SPA的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/292723.html
微信扫一扫 
支付宝扫一扫 
