在javascript中实现路由跳转的核心是通过hash模式或history模式在不刷新页面的前提下改变url并动态渲染内容。1. hash模式利用url中#后的哈希值变化触发hashchange事件，兼容性好且无需服务器配置，但url不美观且不利于seo；2. history模式使用html5的pushstate和replacestate方法修改url并监听popstate事件，url更美观且利于seo，但需服务器配置回退路由以避免404错误；3. 实际项目中应根据是否需要seo和服务器控制权来选择模式，若追求简洁和兼容性可选hash模式，若注重用户体验和seo且能配置服务器则应选history模式；4. 构建简易路由系统需包含路由表、路由匹配器、视图渲染器和导航方法，并通过监听事件和手动调用实现跳转与渲染，其核心思想是将路径映射到对应组件或逻辑处理函数，从而实现单页应用的无缝导航体验。
在JavaScript中实现路由跳转，核心在于不刷新页面的前提下，改变URL并根据URL的变化来展示不同的内容。这通常通过两种方式实现：一种是利用URL的哈希（
#
）部分，另一种是借助HTML5的History API。简单来说，就是我们自己来接管浏览器地址栏的变化，然后根据这个变化去决定页面上“画”什么。
解决方案
要实现JS中的路由跳转，我们主要依赖两种机制：Hash模式和History模式。
Hash模式这种方式利用URL中
#
后面的部分（哈希值）来模拟路由。当哈希值改变时，浏览器不会向服务器发送请求，但会触发
hashchange
事件。我们通过监听这个事件，然后根据
window.location.hash
的值来渲染对应的页面内容。
// 简单的Hash模式路由function handleHashChange() { const path = window.location.hash.substring(1) || '/'; // 去掉#号，如果为空则默认为根路径 console.log('当前路由路径（Hash模式）:', path); // 实际应用中，这里会根据path渲染不同的组件或内容 const contentDiv = document.getElementById('app-content'); if (path === '/') { contentDiv.innerHTML = '这是首页
'; } else if (path === '/about') { contentDiv.innerHTML = '关于我们
'; } else { contentDiv.innerHTML = '404 - 页面未找到
'; }}window.addEventListener('hashchange', handleHashChange);// 初始化时处理一次window.addEventListener('DOMContentLoaded', handleHashChange);// 导航示例// 首页// 关于
Hash模式的优点是兼容性好，不需要服务器额外配置。缺点是URL中会一直带着
#
，看起来不太美观，对SEO也不太友好。
History模式 (HTML5 History API)这种方式利用
pushState()
和
replaceState()
方法来改变URL，同时不触发页面刷新。当用户点击浏览器前进/后退按钮时，会触发
popstate
事件。我们可以监听这个事件，并获取当前的
window.location.pathname
来渲染内容。
// 简单的History模式路由function handleHistoryChange() { const path = window.location.pathname; console.log('当前路由路径（History模式）:', path); // 实际应用中，这里会根据path渲染不同的组件或内容 const contentDiv = document.getElementById('app-content'); if (path === '/') { contentDiv.innerHTML = '这是首页
'; } else if (path === '/products') { contentDiv.innerHTML = '产品列表
'; } else { contentDiv.innerHTML = '404 - 页面未找到
'; }}window.addEventListener('popstate', handleHistoryChange);window.addEventListener('DOMContentLoaded', handleHistoryChange);// 导航函数function navigate(path) { history.pushState(null, '', path); // 第一个参数是state对象，第二个是title（目前多数浏览器忽略），第三个是URL handleHistoryChange(); // 手动调用处理函数，因为pushState不会触发popstate}// 导航示例// //
History模式的优点是URL更美观，与传统网站的URL一致，对SEO更友好。但它需要服务器端进行配置，以确保当用户直接访问某个深层路径时（例如
example.com/products
），服务器能返回应用的
index.html
文件，而不是404错误。
为什么我们需要前端路由？
在我看来，前端路由的出现，是现代Web应用发展到一定阶段的必然产物。想想看，以前的网站，每次点击链接都得刷新整个页面，那体验简直是灾难性的。尤其是在网络状况不好的时候，等待白屏的时间足以让人失去耐心。
前端路由的核心价值，就是它让我们的Web应用变得更像一个桌面应用。它带来了单页应用（SPA）的概念，用户在网站内部导航时，页面不会整体刷新，只是局部内容发生变化。这种无缝的体验，极大地提升了用户的流畅感和满意度。
从技术角度讲，它减少了不必要的HTTP请求，因为很多资源（如JS、CSS文件）在首次加载后就被缓存了，后续切换路由时只需请求少量数据。这不仅减轻了服务器压力，也让应用响应更快。此外，前端路由也促成了组件化开发的流行，每个路由对应一个或多个组件，让代码结构更清晰，维护起来也方便不少。它真的改变了我们构建Web应用的方式，让前端工程师有了更大的发挥空间。
Hash模式和History模式，我该如何选择？
这确实是个让人纠结的问题，就像选择吃面还是吃米饭，各有各的好处，得看你具体“饿”什么。
Hash模式，它就像是老派的、可靠的“备胎”。它的最大优势在于兼容性极佳，几乎所有浏览器都支持，而且不需要服务器做任何特殊配置。你把前端代码打包好直接扔到任何静态文件服务器上，甚至用
file://
协议打开，它都能跑起来。对于一些简单的、对SEO要求不高的内部管理系统，或者纯粹的个人项目，Hash模式简直是“开箱即用”的利器。但缺点也很明显，URL里那个
#
符号总是挥之不去，看起来不够“高大上”，而且搜索引擎对带
#
的URL抓取和索引可能没那么友好，这对于需要SEO的公共网站来说是个硬伤。
History模式，则是现代Web应用的首选。它的URL干净整洁，和传统的多页应用URL一模一样，对SEO非常友好。用户看到这样的URL，会觉得你的网站更专业、更可靠。然而，它的“麻烦”在于需要服务器端进行配置。当用户直接在浏览器地址栏输入一个非根路径的URL（比如
example.com/products
）并回车时，服务器会尝试去寻找
/products
这个文件或目录，如果找不到，就会返回404。为了解决这个问题，服务器需要配置一个“回退路由”（fallback routing），将所有未匹配到的路径都重定向到你的
index.html
文件。这意味着如果你没有服务器的控制权（比如只用GitHub Pages托管），History模式可能会让你头疼。
所以，我的建议是：
如果你追求极致的简单和兼容性，或者没有服务器配置权限，那Hash模式是个不错的选择。如果你希望URL美观、对SEO有要求，并且能控制服务器配置（哪怕只是配置Nginx或Apache的重写规则），那么History模式绝对是首选。现在主流的Vue Router、React Router等框架，默认也都是History模式。
在实际项目中，如何构建一个简单的路由系统？
在实际项目里，我们通常不会像上面那样直接监听
hashchange
或
popstate
事件，然后手写一大堆
if/else
来判断路径。那会非常臃肿且难以维护。一个稍微像样点的路由系统，至少会包含以下几个核心部分：
路由表（Route Map）：这是一个对象或数组，用来定义URL路径和对应要渲染的组件或执行的函数之间的映射关系。
const routes = { '/': () => console.log('渲染首页组件'), '/users': () => console.log('渲染用户列表组件'), '/users/:id': (params) => console.log('渲染用户详情组件，ID:', params.id), '/404': () => console.log('渲染404页面')};
路由匹配器（Matcher）：一个函数，负责解析当前URL，并根据路由表找到匹配的路由。这涉及到路径参数的提取（比如
/users/123
中的
123
），甚至可能是查询参数的解析。
视图渲染器（View Renderer）：当路由匹配成功后，这个部分负责根据匹配到的路由信息，动态地加载并渲染对应的UI组件到页面的某个容器中。这可能涉及到操作DOM，或者调用像React、Vue这样的框架的渲染方法。
导航方法（Navigation Method）：提供一个统一的接口，比如
router.push('/new-path')
，来触发路由跳转。这个方法内部会调用
history.pushState
或设置
location.hash
，然后触发路由匹配和渲染流程。
事件监听与初始化：在应用启动时，需要监听
popstate
或
hashchange
事件，并在事件触发时重新执行路由匹配和渲染。同时，首次加载页面时也需要执行一次。
我们来构思一个极其简化的History模式路由骨架，仅仅是为了展示其基本思路：
// app.jsclass MySimpleRouter { constructor(routes) { this.routes = routes; // 绑定this，确保事件监听器中的this指向MySimpleRouter实例 this._boundHandlePopState = this._handlePopState.bind(this); window.addEventListener('popstate', this._boundHandlePopState); // 首次加载页面时，执行一次路由处理 window.addEventListener('DOMContentLoaded', () => this._handlePopState()); } // 内部方法：处理popstate事件或手动调用 _handlePopState() { const path = window.location.pathname; let matchedRoute = null; let params = {}; // 简化的路由匹配逻辑，实际会复杂很多 for (const routePath in this.routes) { // 简单处理精确匹配 if (routePath === path) { matchedRoute = this.routes[routePath]; break; } // 考虑路径参数：/users/:id const pathParts = path.split('/'); const routeParts = routePath.split('/'); if (pathParts.length === routeParts.length) { let match = true; let currentParams = {}; for (let i = 0; i console.log('404 Not Found')))(params); } } // 外部调用方法：进行路由跳转 push(path) { history.pushState(null, '', path); this._handlePopState(); // pushState不会触发popstate，所以需要手动调用 } // 销毁监听器，防止内存泄漏（在SPA中通常不需要，因为路由器伴随应用生命周期） destroy() { window.removeEventListener('popstate', this._boundHandlePopState); }}// 示例用法const appRoutes = { '/': (params) => { document.getElementById('app').innerHTML = `首页
欢迎来到主页！
`; console.log('Home Page', params); }, '/about': (params) => { document.getElementById('app').innerHTML = `关于我们
我们致力于...
`; console.log('About Page', params); }, '/users/:id': (params) => { document.getElementById('app').innerHTML = `用户详情
用户ID: ${params.id}
`; console.log('User Detail Page', params); }, '/404': () => { document.getElementById('app').innerHTML = `404
抱歉，页面未找到。
`; console.log('404 Page'); }};const router = new MySimpleRouter(appRoutes);// 假设页面上有导航链接或按钮document.getElementById('nav-home').addEventListener('click', (e) => { e.preventDefault(); router.push('/');});document.getElementById('nav-about').addEventListener('click', (e) => { e.preventDefault(); router.push('/about');});document.getElementById('nav-user-1').addEventListener('click', (e) => { e.preventDefault(); router.push('/users/123');});document.getElementById('nav-unknown').addEventListener('click', (e) => { e.preventDefault(); router.push('/unknown-path');});// HTML结构可能像这样：/**/
这个示例虽然还是非常简化，但它展示了一个路由系统如何将URL与具体的逻辑（这里是简单的
console.log
和
innerHTML
操作）关联起来，并处理路径参数。真正的框架级路由（如Vue Router、React Router Dom）会在此基础上增加嵌套路由、命名路由、导航守卫、滚动行为管理、状态管理等更复杂的功能，但其基本原理，万变不离其宗。理解了这些，你就掌握了前端路由的精髓。
以上就是js中如何实现路由跳转的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516201.html
微信扫一扫 
支付宝扫一扫 
