重回原点，探索 Hash 和 History 路由的原生 JS 之旅

前言

在现代前端开发中，路由已经成为不可或缺的一部分。它可以让我们在同一个页面内轻松实现多页面的切换，为用户带来更加流畅和便捷的交互体验。在诸多路由技术中，Hash 路由和 History 路由是两种最常用的方案。本文将详细介绍这两种路由的原理和实现方法，并使用原生 JavaScript 来进行代码实现。

Hash 路由：简单易用的片段标识符

Hash 路由是一种较为传统的路由技术，它使用 URL 哈希 (#) 来标识不同的页面。当用户在浏览器地址栏中输入一个带有哈希标记的 URL 时，浏览器会将哈希部分作为页面锚点，并滚动到相应的页面位置。

Hash 路由具有简单易用、跨浏览器兼容性好等优点，但它也有一个明显的缺点：哈希部分不会被服务器端识别，因此无法用于服务器端的页面渲染。

History 路由：无缝衔接的 URL 路径

History 路由是一种更为现代的路由技术，它使用 URL 路径来标识不同的页面。当用户在浏览器地址栏中输入一个不带有哈希标记的 URL 时，浏览器会将整个 URL 路径发送给服务器端，由服务器端进行页面渲染。

History 路由具有无缝衔接的 URL 路径、支持服务器端页面渲染等优点，但它也有一些缺点，如对浏览器历史记录的操作可能导致页面刷新等。

原生 JS 实现 Hash 路由和 History 路由

下面，我们将使用原生 JavaScript 来实现 Hash 路由和 History 路由。

Hash 路由实现

window.addEventListener('hashchange', () => {
  // 获取哈希部分
  const hash = window.location.hash.slice(1);

  // 根据哈希值加载不同的页面内容
  loadPage(hash);
});

function loadPage(hash) {
  // 根据哈希值获取对应的页面内容
  const content = getPageContent(hash);

  // 将页面内容插入到页面中
  document.getElementById('main').innerHTML = content;
}

History 路由实现

window.addEventListener('popstate', (e) => {
  // 获取当前 URL 的路径部分
  const path = window.location.pathname;

  // 根据路径加载不同的页面内容
  loadPage(path);
});

function loadPage(path) {
  // 根据路径获取对应的页面内容
  const content = getPageContent(path);

  // 将页面内容插入到页面中
  document.getElementById('main').innerHTML = content;
}

结论

Hash 路由和 History 路由是两种不同的路由技术，各有优缺点。在实际开发中，我们可以根据具体的需求选择合适的路由技术。原生 JavaScript 可以实现 Hash 路由和 History 路由，这为我们提供了更多的灵活性。希望本文能帮助您更好地理解 Hash 路由和 History 路由，并能够在您的项目中熟练地使用它们。