使用 History API 构建 JavaScript 路由器

最后更新：2022-02-16 18:15:31 手机定位技术交流文章

在本文中，我们将构建一个客户端路由系统。客户端路由是一种路由类型，用户在其中导航应用程序，即使页面的 URL 发生更改，也不会重新加载整个页面，而是显示新内容。

为了构建它，我们需要一个简单的服务器来提供我们的index.html文件。准备好？让我们开始。

让我们为我们的 HTML 创建一个简单的样板：

在这里，我们将链接main.js文件，以便我们可以在任何时间点操作 DOM。

实现路由系统

让我们转到main.js文件并编写我们所有的路由器逻辑。我们所有的代码都将被包装在window.onload其中，以便它们仅在网页完全加载其所有内容后才执行脚本。

接下来，我们将创建一个路由器实例，它是一个带有两个参数的函数。第一个参数将是路线的名称，第二个参数将是一个包含我们定义的所有路线的数组。这条路线将有两个属性：路线的名称和路线的路径。

我们可以获取我们页面当前的路由路径，并根据该路由显示一个模板。location.pathname返回页面的当前路由，我们可以将这段代码用于我们的 DOM：

我们将使用该currentPath变量来检查路由实例中是否定义了路由。如果路由存在，我们将呈现一个简单的 HTML 模板。如果没有，我们将This route is not defined显示在页面上。

随意显示您选择的任何形式的错误。例如，如果路由不存在，您可以将其重定向回主页。

对于页面导航，我们可以添加路由器链接。就像使用 Angular 一样，您可以传递一个 routerLink具有您要导航到的路径的值的值。为了实现这一点，让我们在index.html文件中添加一些链接：

注意我们传入的router-link属性——这是我们将用于路由的属性。

我们将创建一个存储所有的router-link变量并将其存储在一个数组中：

在将我们的路由链接存储在一个数组中之后，我们可以遍历它们并添加一个调用navigate()函数的点击事件侦听器：

导航功能将使用 Javascript History API 进行导航。 history.pushState()方法将状态添加到浏览器的会话历史堆栈。

单击按钮时，我们将收到该按钮的路由器链接属性，然后使用history.pushState()导航到该路径，然后更改呈现的 HTML 模板：

如果一个 nav 链接有一个未在中定义的路由器链接routeInstance，它会将推送状态设置为This route is not Defined并在模板上error渲染。

接下来，您应该考虑将路由存储在单独的文件中，这样可以使代码更整洁，并且在出现任何错误时更易于调试。现在，创建routes.js文件并将路由构造函数和路由器实例提取到这个新文件中：

导出此文件使其可供其他 JavaScript 文件访问。我们可以将它导入到我们的 main.js 文件中：

这将引发错误。要修复它，请将 index.html 文件中的脚本标记修改为：

添加模块的类型指定可以在模块外部访问哪些变量和函数。

了解如何在 Vanilla JavaScript 中实现路由系统可以让开发人员更轻松地使用框架路由库，例如 Vue.js 路由器。我们这里的代码可以在单页应用程序中重用，当您在没有框架的情况下工作时这是完美的。要获取源代码，请查看 GitHub 。