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

allway2

已于 2022-02-16 14:10:40 修改

阅读量206

点赞数

文章标签： javascript 哈希算法前端

于 2022-02-16 12:57:30 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/122961087

版权

JavaScript URL路由 vanillaJS hashchange事件 DOMContentLoaded

关键词由CSDN通过智能技术生成

在这篇文章中，我将向您展示如何在不到 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。如果您希望每次哈希更改时触发它（用户导航到应用程序中的不同页面），您可以使用hashchangewindow 事件执行此操作：

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找到。您可以看到，当您单击各个超链接时，标题标签会更改以显示当前哈希。

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

我通过 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>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在 vanilla javascript 中实现 URL 哈希路由路由

在这篇文章中，我将向您展示如何在不到 30 行代码的情况下，在不使用 angular、vue、react、ember 等任何繁重的框架的情况下，在 vanilla JavaScript 中实现动态 URL 路由！您需要了解的重要属性是window.location，更具体地说，是我们的目的，window.location.hash.这个内置属性基本上告诉我们当前所在的页面 URL 或路由（例如：）index.html#something。如果没有哈希 URL 并且您位于主 URL（例如：index.h.
复制链接

扫一扫