在这篇文章中,我将向您展示如何在不到 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找到。您可以看到,当您单击各个超链接时,标题标签会更改以显示当前哈希。
完整的源代码可以在我的 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>