Vanilla JavaScript 哈希 URL 路由器

我看到一篇关于如何在纯 Vanilla JavaScript 中创建路由器的帖子。由于它不是在讨论散列路由，因此我决定创建这篇文章来与您分享我的知识。

我为什么要这么做？

多亏了 History API，在 JavaScript 中构建路由器现在变得很简单。它在很大程度上得到支持，让您可以按照自己的方式构建路由器，而无需依赖第三方库。在 Vue.js 中，您甚至可以构建自己的自制路由器并将其插入，这要归功于 Vue.js 插件。事实上，Vue.js 的官方路由器库 Vue Router 依赖于 History API。但不仅如此。因为它可以选择让您构建所谓的散列路由器。

什么是散列路由器？

它是一个不依赖 History API 而是依赖于您网站的哈希 URL 的路由器。假设您的网页上有一个标题。

并且您希望您的用户在页面顶部时直接跳转到此部分。你会想id为你的标题使用一个属性。

并创建一个链接，例如在您的标题中，将您的用户重定向到此部分。

现在，如果您单击链接，URL 应该来自

到

没什么花哨的，对吧？

为什么我要使用散列路由器？

基于历史 API 的路由器的问题在于它依赖于页面的来源来工作。如果您尝试打开实现 History API 的 HTML 页面，您应该会看到如下内容：

这是因为默认情况下，作为文件打开的 HTML 文档的来源设置为null. 这是个问题。

相反，基于 hased 的路由器不依赖于它，而是依赖于窗口对象触发的事件。当我们更改 url 的哈希时，将触发此事件。在我们之前的示例中，单击链接会触发此事件。不需要网络服务器。

如何实现散列路由器？

它就像只使用一个事件一样简单。事件 onHashChange 。

在线尝试 。

实现路由

我们现在需要获取用户发出的路由。我们可以使用该 window.location.hash 属性来获取当前“路线”的值。

在线尝试 。

我们现在拥有我们需要的一切。我们可以开始为我们的路由器实现视图渲染器。

我还添加了另一个链接。这将帮助我向您展示我们如何实现404 - page not found处理程序。你会惊讶于它是多么容易。

接下来，我们需要向我们的处理程序添加更多逻辑，onRouteChange以便它可以像路由器一样呈现我们的路由。

在线尝试 。

我将哈希 URL 存储在一个变量中，以便我可以使用该switch语句根据用户发出的路由呈现不同的 HTML 内容。我还存储了路由器视图元素以检查该元素是否确实在文档中（我们永远不知道会发生什么，在这种情况下有一些雄辩的错误消息会很好）。我还需要它来更新语句innerHTML中路由器的内容。switch

switch 的默认语句将通过我们的联系链接触发，因为我们没有在 switch 中为它指定任何处理程序。

而已！您有一个非常基本的路由器，可以在任何地方工作，无论是托管在 Web 服务器上，还是作为单个 HTML 页面共享。例如，当您需要向客户展示网站的快速原型时，我可以看到一些用例。他所要做的就是在他的浏览器中打开页面，然后tada！

限制

当然，这种路由有一个明显的限制，因为我们使用的是 URL 的哈希值，并破解了它的初衷，将其用作路由器。但是如果我们需要在我们的页面中使用常规的hrefs，它只会破坏路由，因为它会触发我们的哈希更改处理程序。

解决方案

我为这个问题找到的一个解决方案可能不是最好的，但如果你绝对需要使用基于散列的路由，那么它是值得的，它是使用data-*属性和一点 JavaScript。

某些设备上的平滑滚动不起作用（我特别想到了一些 Apple 设备），但我敢肯定，这将是您可以找到解决此问题的许多解决方案之一。我的解决方案的缺点是它不能用于共享链接，如Hey, look what I found here: http://yoursite.com#home#title-of-article. 我将此作为练习，供读者实施更好的解决方案。

结论

基于哈希的路由器是另一种无需重新加载页面即可路由用户的方式。这在创建 GitHub 页面时也很方便，因为我们不必重新考虑基于历史记录的路由器并在所有路由前加上/github-repo/about.

如果您不需要使用大量的 href 重定向并且不想/不能使用 History API，那么在您的页面中使用路由器可能是一个很好的解决方案。

我向您展示的是基于 hased 的路由器的一个非常基本的实现。如果你想更进一步，你可以：

• 在一个对象中实现这个路由器，就像new HashedRouter使 API 更易于使用一样。addRoute特别是使用和之类的方法start。
• 找到比我用来在页面中实现链接更好的解决方案。

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/18486.html。