本文实例讲述了JS实现前端路由功能。分享给大家供大家参考，具体如下：
路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。
单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。
路由实现的原理：window绑定了监听函数，当url的hash值发生变化的时候会触发hashchange回调，在回调中进行不同的操作，马上刷新页面，从而显示不同的页面。
下面是一个前端路由的简单实现：通过路由实现url的切换、页面内容的改变。
index.html
前端路由测试 *{ 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; } 第一个页面第二个页面第三个页面
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("路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。
"); }); Router.route('/two', function () { $(".content").html("单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。
"); }); Router.route('/three', function () { $(".content").html(""); });
注意：router.js要在test.js之前进行调用，不然会先加载test.js从而找不到，出现router.js未被定义。
上面router对象实现主要提供了三个方法
1.init监听浏览器url的hash值更新事件。
2.route存储路由更新时的回调到回调数组routes中，回掉函数将负责对页面进行更新。
3.refresh执行当前url的回调函数，更新页面。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.html.cn/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是JS实现前端路由功能示例【原生路由】的详细内容，更多请关注本站其它相关文章！
