路由器界面html模板,Javascript实现前端简单的路由实例

前言

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一样，是让所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是web应用都用到了前端路由。

HTML

页面中有一个导航菜单ul，和一个div#result用来显示结果，当点击导航菜单时，#result中会显示不同的结果内容。

• 首页
• 产品
• 服务

JAVASCRIPT

说一下前端路由实现的简要原理，以 hash 形式(也可以使用 History API 来处理)为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。

function Router(){

this.routes = {};

this.curUrl = '';

this.route = function(path, callback){

this.routes[path] = callback || function(){};

};

this.refresh = function(){

this.curUrl = location.hash.slice(1) || '/';

this.routes[this.curUrl]();

};

this.init = function(){

window.addEventListener('load', this.refresh.bind(this