这里为大家详细讲解一下如何制作自己的原生JavaScript路由。
什么是JavaScript路由
JavaScript路由是一种通过JavaScript对页面URL进行控制的技术，它可以实现局部刷新，无需完全刷新页面即可展示新的内容，并且可以通过状态管理实现前端路由系统。
如何制作自己的JavaScript路由
步骤如下：
1. 创建HTML页面
我们以一个简单的单页面应用为例，创建一个HTML页面作为路由的载体。在HTML页面中，我们可以根据自己的需求定义不同的页头、页脚、导航栏等元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Router App</title>
</head>
<body>
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</nav>
<div id="content">
<h1>Welcome Home!</h1>
<p>Content will load here...</p>
</div>
</body>
</html>
2. 实现路由逻辑
为了实现JavaScript路由，我们需要监听window对象的hashchange事件。当URL中的哈希值发生变化时，我们就可以通过自定义的路由规则来决定显示哪个页面。比如我们可以定义一个名为router的函数，来控制路由：
function router() {
let hash = window.location.hash.substr(1);
if (hash === "") {
document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
} else if (hash === "about") {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
} else if (hash === "contact") {
document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
} else {
document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
}
}
window.addEventListener("hashchange", router);
router();
这个函数的作用是根据不同的哈希值，决定页面显示的内容。在这个示例中，我们根据哈希值的不同，来显示不同的静态页面。
3. 处理路由参数
如果我们想要传递一些参数，比如说我们想让/about页面根据用户不同的参数来动态显示不同的内容，那应该怎么处理呢？
一个常见的方法是在哈希值中使用动态参数，例如#about/:id。这里的id就是参数，我们可以用正则表达式来提取它，然后根据这个参数来显示不同的内容。
function extractParams(template, request) {
const params = {};
const res = template.exec(request);
if (res) {
for (let i = 1; res[i]; i++) {
params[res[i].split('=')[0]] = res[i].split('=')[1];
}
}
return params;
}
function router() {
let hash = window.location.hash.substr(1);
let params = extractParams(/about\/(\w+)/.exec(hash), hash);
if (hash === "") {
document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
} else if (hash === "about") {
if (params && params.id) {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>Showing content for user " + params.id + "</p>";
} else {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
}
} else if (hash === "contact") {
document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
} else {
document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
}
}
window.addEventListener("hashchange", router);
router();
在这个示例中，我们定义了一个extractParams函数，用于提取哈希值中的参数。然后在router函数中，我们根据提取到的参数来动态显示不同的内容。
示例
以上是制作自己的JavaScript路由的具体过程，下面我为大家提供两个适用示例。
1. 基本的SPA应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Router App</title>
</head>
<body>
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</nav>
<div id="content">
<h1>Welcome Home!</h1>
<p>Content will load here...</p>
</div>
<script>
function router() {
let hash = window.location.hash.substr(1);
if (hash === "") {
document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
} else if (hash === "about") {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
} else if (hash === "contact") {
document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
} else {
document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
}
}
window.addEventListener("hashchange", router);
router();
</script>
</body>
</html>
2. 处理动态路由参数的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Router App</title>
</head>
<body>
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/about/123456">About User #123456</a>
<a href="#/contact">Contact</a>
</nav>
<div id="content">
<h1>Welcome Home!</h1>
<p>Content will load here...</p>
</div>
<script>
function extractParams(template, request) {
const params = {};
const res = template.exec(request);
if (res) {
for (let i = 1; res[i]; i++) {
params[res[i].split('=')[0]] = res[i].split('=')[1];
}
}
return params;
}
function router() {
let hash = window.location.hash.substr(1);
let params = extractParams(/about\/(\w+)/.exec(hash), hash);
if (hash === "") {
document.getElementById("content").innerHTML = "<h1>Welcome Home!</h1><p>Content will load here...</p>";
} else if (hash === "about") {
if (params && params.id) {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>Showing content for user " + params.id + "</p>";
} else {
document.getElementById("content").innerHTML = "<h1>About Us</h1><p>We are a team of developers...</p>";
}
} else if (hash === "contact") {
document.getElementById("content").innerHTML = "<h1>Contact Us</h1><p>You can send us an email...</p>";
} else {
document.getElementById("content").innerHTML = "<h1>Page Not Found</h1><p>The page you requested was not found...</p>";
}
}
window.addEventListener("hashchange", router);
router();
</script>
</body>
</html>
以上就是制作自己的JavaScript路由的完整攻略，希望对大家有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何制作自己的原生JavaScript路由 - Python技术站
微信扫一扫 
支付宝扫一扫 