如何在 vanilla javascript 中实现 URL 哈希路由路由

太过爱你忘了你带给我的痛 2023-10-01 18:52 124阅读 0赞

在这篇文章中，我将向您展示如何在不到 30 行代码的情况下，在不使用 angular、vue、react、ember 等任何繁重的框架的情况下，在 vanilla JavaScript 中实现动态 URL 路由！

您需要了解的重要属性是`window.location`，更具体地说，是我们的目的，`window.location.hash`. 这个内置属性基本上告诉我们当前所在的页面 URL 或路由（例如：）`index.html#something`。如果没有哈希 URL 并且您位于主 URL（例如：`index.html`或`index.html#`），则此属性为空。在这种情况下，您可以假设一个默认哈希值`_index`以保持一致性：

function displayHash() {
      var theHash = window.location.hash;
      if (theHash.length == 0) { theHash = "_index"; }
      var elems = document.querySelectorAll("#caption");
      elems[0].innerText = "Current Hash: " + theHash;
      return true;
    }

这个简单的函数在名为 的标题元素中显示当前哈希`#caption`。如果您希望每次哈希更改时触发它（用户导航到应用程序中的不同页面），您可以使用`hashchange`window 事件执行此操作：

window.addEventListener("hashchange", function() {
      console.log("hashchange event");
      displayHash();
    });

最后，为了在用户第一次在浏览器中加载 URL 时显示标题，您也可以`displayHash()`在`DOMContentLoaded`事件调用中调用：

window.addEventListener("DOMContentLoaded", function(ev) {
      console.log("DOMContentLoaded event");
      displayHash();
    });

这就是所有的人！URL 路由非常容易实现，根本不需要使用任何笨重和臃肿的框架。此示例的演示可以在[prahladyeri.github.io/learn-js/url-routing][prahladyeri.github.io_learn-js_url-routing]找到。您可以看到，当您单击各个超链接时，标题标签会更改以显示当前哈希。

完整的源代码可以在我的 github repo 中找到，[prahladyeri/learnjs][prahladyeri_learnjs]（不到 30 行 ;-)。

[我通过 Tulio Faria 的][Tulio Faria]这篇 StackOverflow 帖子遇到了这个解决方案，它使用了 jquery，但我将它改编为 vanilla JavaScript。

<!doctype html>
    <html>
    <head><title>URL Routing in Pure JS</title></head>
    <body>
    <h1 id='caption'></h1>
    <a href="">Home</a><hr>
    <a href="#js">JavaScript</a><a href="#python">Python</a><a href="#php">PHP</a><a href="#java">Java</a><hr>
    <a href="#angular">Angular</a><a href="#vuejs">Vue.js</a><a href="#ember">Ember</a><a href="#react">React</a>
    <script>
    	function displayHash() {
    	  var theHash = window.location.hash;
    	  if (theHash.length == 0) { theHash = "_index"; }
    	  var elems = document.querySelectorAll("#caption");
    	  elems[0].innerText = "Current Hash: " + theHash;
    	  return true;
    	}
    
    	window.addEventListener("hashchange", function() {
    	  console.log("hashchange event");
    	  displayHash();
    	});
    
    	window.addEventListener("DOMContentLoaded", function(ev) {
    	  console.log("DOMContentLoaded event");
    	  displayHash();
    	});
    </script>
    </body>
    </html>

[prahladyeri.github.io_learn-js_url-routing]: https://prahladyeri.github.io/learn-js/url-routing
[prahladyeri_learnjs]: https://github.com/prahladyeri/learn-js/blob/master/url-routing/index.html
[Tulio Faria]: https://stackoverflow.com/a/41426078/849365