在单页应用中，监听路由变化可通过两种方式实现：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 修改 URL
function 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 修改 URL
document.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. 使用第三方路由库
现在有很多成熟的 JavaScript 路由库，例如 Vue Router、React Router 等。这些库封装了底层的路由监听逻辑，提供了更高级的 API，方便开发者使用。 使用这些库通常能够更高效地管理单页应用的路由。 例如，使用 Vue Router，你可以定义路由规则，并使用 <router-link> 组件进行导航，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 应用。
