路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。
早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。（可以根据不同的url来展示不同的页面，很好的优化了页面的交互体验。）
目前有两种方式：
1：H5的history的新API（pushstate、replacestate、popstate）;由于不兼容IE10以下，本文不进行讨论；可自行查看官网：https://developer.mozilla.org/en-US/docs/Web/API/History
2：hash路由基本实现原理：
* 浏览器不会识别url中#后面的内容，所以改变#后面的内容不会触发reload；
* 通过hashchange我们可以监听到#后面内容的改变，然后就可以进行ajax等操作。实现页面的改变
下面代码展示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*css代码比较混乱，大家不用在意这里*/
* {
margin: 0;
padding: 0;
}
.container {
box-sizing: border-box;
}
.leftSide {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 300px;
background-color: #bbb;
}
.rightSide {
display: flex;
align-items: center;
justify-content: center;
float: right;
width: 50%;
height: 300px;
background-color: #5bb;
}
</style>
</head>
<body>
<div class="container">
<div class="rightSide">
<div id="myPage">
</div>
</div>
<div class="leftSide">
<ul>
<li><a href="#/">默认 </a></li>
<li><a href="#/blue"> 蓝</a></li>
<li><a href="#/black">黑 </a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="./myRouter.js"></script>
</html>
(function() {
class Router {
constructor() {
this.routes = {};
this.currentUrl = "";
}
init() {
window.addEventListener(‘load‘, () => this.refresh(), false);
window.addEventListener(‘hashchange‘,() => this.refresh(), false);
}
refresh() {
this.currentUrl = location.hash.slice(1) || "/";
if (typeof this.routes[this.currentUrl] === ‘function‘) {
this.routes[this.currentUrl]();
}else {
this.routes["/404"]();
}
}
route(path, callback) {
this.routes[path] = callback;
}
};
function changeView(str) {
document.getElementById("myPage").innerHTML=str;
}
var router=new Router();
router.init();
router.route("/", () => changeView("<h1>默认页面</h1>"));
router.route("/blue", () => changeView("<h1>blue页面</h1>"));
router.route("/black", () => changeView("<h1>black页面</h1>"));
router.route("/404",() => changeView("<h1>404 请求的页面不存在</h1>"));
})()
以上就是hash路由的最简单。最基本的实现；
最终的效果如下;通过点击不同的按钮，触发url中hash部分的改变，改变页面
原文地址：https://www.cnblogs.com/zhilingege/p/8391338.html
时间： 2024-07-31 13:18:27