Javaｓｃｒｉｐｔ在前端实现了一个简单的路由实例。

前言

前端路由是许多开源JS库框架支持，比如AngularJS，骨干，reactjs，所以on.front-end路由和路由都是后台所有交互和显示页面上减少服务器的请求，提高客户体验。越来越多的网站，尤其是Web应用程序，使用前端路由。

HTML

有一个导航菜单UL在页面和DIV #结果显示结果。当导航菜单点击，不同的结果将在#结果显示。
首页
产品
服务

Javaｓｃｒｉｐｔ

前端路由实现原理简单，在哈希表（你也可以使用历史API处理）为例，当URL散列的变化，触发hashchange注册回调回调对不同业务、不同内容的显示。
函数路由器（）{
this.routes = { }；
this.cururl =；

this.route =功能（路径，回调）{
这个路线{路径} =回调（功能）{ } | |；
}；

this.refresh =函数（）{
this.cururl = location.hash.slice（1）| |；
这个路线{这cururl }（）；
}；

this.init =函数（）{
Window.addEventListener（载荷，this.refresh.bind（这），假）；
Window.addEventListener（'hashchange '，this.refresh.bind（这），假）；
}
}
以上代码由系统路由器对象实现，主要提供三种方法：

init侦听浏览器URL哈希更新事件。

当存储路由更新时，路由将回调存储到回调数组路由，回调函数将负责页面的更新。

刷新执行与当前URL相对应的回调函数，并更新页面。

路由器调用的方式如下：

单击触发URL的哈希更改并相应更新内容。运行后，你会发现，背景颜色和内容将在#结果每次单击菜单改变。
新路由器（）；
R.init（）；
VaR既= document.getelementbyid（'result）；

r.route（功能）{（/。
res.style.background = '蓝色'；
res.innerhtml =这是网页；
}）；
r.route（ /产品的功能（）{（）{
res.style.background = 'orange；
res.innerhtml =这是产品页面；
}）；
r.route（ /服务器功能（）{（）{
res.style.background =；
res.innerhtml =这是一个服务页面；
}）；
总结

以上是一个简单的前端路由实现。在实践中，哈希应该通过正则匹配来处理，以满足大量URL应用程序的需要，同时增加Ajax异步请求页面内容和其他功能。其他路由系统主要支持和优化自己的框架mechanisms.ok，本文研究的内容是。我希望它能给大家的学习或工作带来一些帮助。如果有任何疑问，你可以留言。