JS监听路由变化的几种方法

在单页应用（SPA）中，监听路由变化是实现页面动态更新的关键技术。本文详解了两种主要的JavaScript路由监听方法，助你轻松掌握SPA路由管理。第一种方法是利用`hashchange`事件，适用于基于hash的路由，兼容性好，但URL不够美观。第二种方法是使用HTML5 History API的`pushState`/`replaceState`结合`popstate`事件，URL更美观且利于SEO，但需注意兼容性处理及初始加载问题。此外，本文还介绍了如何处理初始加载路由、管理路由状态、实现404页面以及构建路由守卫等实用技巧，助力开发者构建更流畅、更用户友好的Web应用。无论你是新手还是经验丰富的开发者，都能从中受益，提升SPA开发效率。

在单页应用中，监听路由变化可通过两种方式实现：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，你可以定义路由规则，并使用 组件进行导航，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 应用。

文中关于单页应用,popstate,HistoryAPI,路由监听,hashchange的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS监听路由变化的几种方法》文章吧，也可关注golang学习网公众号了解相关技术文章。