JS实现前端路由功能示例【原生路由】
程序员文章站
2022-07-06 18:20:14
本文实例讲述了js实现前端路由功能。分享给大家供大家参考，具体如下：路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，...
本文实例讲述了js实现前端路由功能。分享给大家供大家参考，具体如下：
路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。
单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。
路由实现的原理：window绑定了监听函数，当url的hash值发生变化的时候会触发hashchange回调，在回调中进行不同的操作，马上刷新页面，从而显示不同的页面。
下面是一个前端路由的简单实现：通过路由实现url的切换、页面内容的改变。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>前端路由测试</title>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style>
*{
margin:0;
padding: 0;
}
.content{
width: 500px;
height: 300px;
margin-top: 30px;
margin:20px auto 0;
}
#click_btn{
width: 500px;
height: 50px;
margin:100px auto 0;
}
#click_btn a{
display: block;
background: #333;
color: #fff;
text-decoration: none;
line-height: 50px;
text-align: center;
float: left;
margin-right: 15px;
padding: 0px 15px;
}
#click_btn a:hover{
background: #666;
}
</style>
</head>
<body>
<div id="click_btn">
<a href="#/one" rel="external nofollow" >第一个页面</a>
<a href="#/two" rel="external nofollow" >第二个页面</a>
<a href="#/three" rel="external nofollow" >第三个页面</a>
</div>
<div class="content"></div>
<script src="router.js"></script>
<script src="test.js"></script>
</body>
</html>
router.js
//构造函数
function router() {
this.routes = {};
this.currenturl = '';
}
router.prototype.route = function(path, callback) {
this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
};
router.prototype.refresh = function() {
console.log(location.hash.slice(1));//获取到相应的hash值
this.currenturl = location.hash.slice(1) || '/';//如果存在hash值则获取到，否则设置hash值为/
// console.log(this.currenturl);
if(this.currenturl&&this.currenturl!='/'){
this.routes[this.currenturl]();//根据当前的hash值来调用相对应的回调函数
}
};
router.prototype.init = function() {
window.addeventlistener('load', this.refresh.bind(this), false);
window.addeventlistener('hashchange', this.refresh.bind(this), false);
}
//给window对象挂载属性
window.router = new router();
window.router.init();
test.js
router.route('/one', function () {
$(".content").html("<p>路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。</p>");
});
router.route('/two', function () {
$(".content").html("<h3>单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。</h3>");
});
router.route('/three', function () {
$(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imagemogr2/auto-orient/strip|imageview2/2/w/1200/format/webp' width='500'/>");
});
注意：router.js要在test.js之前进行调用，不然会先加载test.js从而找不到，出现router.js未被定义。
上面router对象实现主要提供了三个方法
1.init监听浏览器url的hash值更新事件。
2.route存储路由更新时的回调到回调数组routes中，回掉函数将负责对页面进行更新。
3.refresh执行当前url的回调函数，更新页面。
感兴趣的朋友可以使用在线html/css/javascript前端代码调试运行工具：http://tools.jb51.net/code/webcoderun测试上述代码运行效果。