在单页应用中，监听路由变化可通过两种方式实现：1. 使用 hashchange 事件适用于基于 hash 的路由，通过监听 url 中 hash 部分的变化触发页面更新，兼容性好但 url 不够美观；2. 使用 history api 的 pushstate / replacestate 方法结合 popstate 事件适用于 html5 路由，url 更美观且利于 seo，但兼容性相对较差，需注意手动处理初始加载和低版本浏览器兼容问题。
单页应用（SPA）中，监听路由变化是实现页面内容动态更新的关键。本质上，我们需要在路由改变时触发相应的事件，执行更新页面的逻辑。
解决方案
在 JavaScript 中，监听路由变化主要有两种方式：使用 hashchange 事件（适用于基于 hash 的路由），以及使用 History API 的 pushState 和 replaceState 方法结合 popstate 事件（适用于 HTML5 History API 路由）。
1. 基于 Hash 的路由监听：hashchange 事件
当 URL 的 hash 部分（# 及其后面的内容）发生改变时，window 对象会触发 hashchange 事件。我们可以通过监听这个事件来得知路由的变化。
window.addEventListener('hashchange', function(event) { // event.oldURL：之前的完整 URL // event.newURL：现在的完整 URL console.log('路由改变了！'); console.log('旧的 URL：', event.oldURL); console.log('新的 URL：', event.newURL); // 在这里编写处理路由变化的代码，例如更新页面内容 updatePageContent(window.location.hash);});function updatePageContent(hash) { // 根据 hash 值来加载不同的内容 switch (hash) { case '#/home': // 加载首页内容 console.log('加载首页'); break; case '#/about': // 加载关于页面内容 console.log('加载关于页面'); break; default: // 加载默认内容或显示 404 页面 console.log('加载默认页面或 404'); }}
这种方式的优点是兼容性好，几乎所有浏览器都支持。缺点是 URL 中始终带有 #，不够美观，并且不利于 SEO。
2. 基于 History API 的路由监听：pushState / replaceState 和 popstate 事件
HTML5 History API 提供了 pushState 和 replaceState 方法，可以在不刷新页面的情况下修改 URL，并且可以操作浏览器的历史记录。 popstate 事件在用户点击浏览器的前进或后退按钮时触发。
// 监听 popstate 事件window.addEventListener('popstate', function(event) { // event.state：通过 pushState 或 replaceState 传递的状态对象 console.log('popstate 事件触发！'); console.log('状态对象：', event.state); // 在这里编写处理路由变化的代码，例如更新页面内容 updatePageContent(window.location.pathname);});// 使用 pushState 修改 URLfunction navigateTo(path, state) { history.pushState(state, null, path); // 第一个参数是状态对象，第二个参数是标题（已废弃），第三个参数是 URL updatePageContent(path);}function updatePageContent(pathname) { // 根据 pathname 来加载不同的内容 switch (pathname) { case '/home': // 加载首页内容 console.log('加载首页'); break; case '/about': // 加载关于页面内容 console.log('加载关于页面'); break; default: // 加载默认内容或显示 404 页面 console.log('加载默认页面或 404'); }}// 示例：点击链接时，使用 navigateTo 修改 URLdocument.getElementById('home-link').addEventListener('click', function(event) { event.preventDefault(); // 阻止默认的链接跳转行为 navigateTo('/home', { page: 'home' }); // 跳转到 /home，并传递状态对象});document.getElementById('about-link').addEventListener('click', function(event) { event.preventDefault(); navigateTo('/about', { page: 'about' });});
需要注意的是，直接在浏览器地址栏输入 URL 并回车，或者刷新页面，popstate 事件不会触发。因此，需要在页面加载时手动调用 updatePageContent 函数，根据当前的 URL 来加载内容。
History API 的优点是 URL 美观，有利于 SEO。缺点是兼容性相对较差，需要考虑低版本浏览器的兼容性处理（可以使用 polyfill）。
3. 使用第三方路由库
讯飞听见
讯飞听见依托科大讯飞的语音识别技术，为用户提供语音转文字、录音转文字等服务，1小时音频最快5分钟出稿，高效安全。
105 查看详情
现在有很多成熟的 JavaScript 路由库，例如 Vue Router、React Router 等。这些库封装了底层的路由监听逻辑，提供了更高级的 API，方便开发者使用。 使用这些库通常能够更高效地管理单页应用的路由。 例如，使用 Vue Router，你可以定义路由规则，并使用 组件进行导航，Vue Router 会自动处理路由变化和页面更新。
如何处理初始加载时的路由？
在页面首次加载时，popstate 事件不会触发，因此需要手动处理初始路由。
// 在页面加载完成后，手动处理初始路由window.addEventListener('load', function() { updatePageContent(window.location.pathname);});
这样，当页面加载完成后，会根据当前的 URL 来加载相应的内容。
如何优雅地管理路由状态？
使用 History API 的 pushState 和 replaceState 方法时，可以传递一个状态对象。这个状态对象可以在 popstate 事件中获取到。利用这个状态对象，可以方便地管理路由状态，例如保存当前页面的滚动位置、表单数据等。
// 在 pushState 中传递状态对象history.pushState({ scrollPosition: 0 }, null, '/home');// 在 popstate 事件中获取状态对象window.addEventListener('popstate', function(event) { const scrollPosition = event.state.scrollPosition; // 恢复滚动位置 window.scrollTo(0, scrollPosition);});
如何处理 404 页面？
在单页应用中，如果用户访问了一个不存在的路由，需要显示 404 页面。可以在 updatePageContent 函数中添加一个默认的 case，用于处理未知的路由。
function updatePageContent(pathname) { switch (pathname) { case '/home': // 加载首页内容 break; case '/about': // 加载关于页面内容 break; default: // 加载 404 页面 load404Page(); }}
如何实现路由守卫？
路由守卫用于控制用户是否有权限访问某个路由。例如，可以根据用户的登录状态来判断是否允许访问某些页面。可以在路由变化时，先执行路由守卫函数，如果用户没有权限访问，则跳转到其他页面。
function routeGuard(pathname) { if (pathname === '/admin' && !isLoggedIn()) { // 如果用户未登录，并且尝试访问 /admin 页面，则跳转到登录页面 navigateTo('/login'); return false; // 阻止继续执行 } return true; // 允许继续执行}function updatePageContent(pathname) { if (!routeGuard(pathname)) { return; // 如果路由守卫返回 false，则不加载页面内容 } switch (pathname) { case '/home': // 加载首页内容 break; case '/about': // 加载关于页面内容 break; case '/admin': // 加载管理页面内容 break; default: // 加载 404 页面 load404Page(); }}
这些技巧可以帮助你更好地监听和管理单页应用的路由变化，构建更流畅、更用户友好的 Web 应用。
以上就是js如何监听路由变化 单页应用路由变化监听技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/259429.html
微信扫一扫 
支付宝扫一扫 
