从无到有：用100行代码实现一个router，让前端项目飞起来

2023-11-06 17:33:01

前言

在现代前端开发中，路由器是必不可少的一环。它可以帮助我们管理页面之间的导航，并根据不同的URL呈现不同的内容。

经常能看到各种关于路由的文章，当中都会提到现代路由主要通过history中pushState等api来实现。笔者就觉得非常好奇，内部的原理究竟是个啥？最好探究原理的办法，实际上就是实现一个简易版本，再大的代码库也是由一个个小问题累积而来。所以实现一个最小版本的路由器实际上可以…

实现原理

路由器的工作原理并不复杂，它主要是通过监听浏览器的URL变化来触发相应的动作。当URL发生变化时，路由器会根据URL中的信息来确定要加载哪个页面或组件。

在我们的示例中，我们将使用JavaScript来实现路由器。首先，我们需要创建一个监听器来监听URL的变化：

window.addEventListener('popstate', () => {
  // URL发生变化时触发的函数
});

接下来，我们需要根据URL中的信息来确定要加载哪个页面或组件。我们可以使用正则表达式来提取URL中的信息，例如：

const url = window.location.pathname;
const match = url.match(/^\/(\w+)/);

如果URL匹配正则表达式，那么我们可以根据匹配到的信息来加载相应的页面或组件。例如：

if (match) {
  const pageName = match[1];
  loadPage(pageName);
}

代码实现

现在，我们已经了解了路由器的基本原理，接下来就可以开始实现我们的路由器了。

首先，我们需要创建一个JavaScript文件，并将其命名为router.js。

然后，我们需要在router.js文件中添加以下代码：

// 监听URL变化
window.addEventListener('popstate', () => {
  // URL发生变化时触发的函数
  const url = window.location.pathname;
  const match = url.match(/^\/(\w+)/);

  if (match) {
    const pageName = match[1];
    loadPage(pageName);
  }
});

// 加载页面
function loadPage(pageName) {
  // 根据页面名称加载相应的页面或组件
  const page = document.querySelector(`#${pageName}`);
  if (page) {
    // 显示页面
    page.style.display = 'block';
  } else {
    // 加载失败，显示错误信息
    alert('页面加载失败！');
  }
}

最后，我们需要在HTML文件中添加以下代码：

<script src="router.js"></script>

<div id="home">
  <h1>Home Page</h1>
</div>

<div id="about">
  <h1>About Page</h1>
</div>

<div id="contact">
  <h1>Contact Page</h1>
</div>