189 8069 5689
这篇文章给大家介绍Javascript中怎么实现前端路由，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
页面中有一个导航菜单ul，和一个p#result用来显示结果，当点击导航菜单时，#result中会显示不同的结果内容。
说一下前端路由实现的简要原理，以 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), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
}
}
上面代码中路由系统Router对象实现，主要提供三个方法：
init 监听浏览器 url hash 更新事件。
route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。
refresh 执行当前url对应的回调函数，更新页面。
Router调用方式如下：点击触发 url 的 hash 改变，并对应地更新内容，运行后你会发现每次点击菜单时，#result中会变换背景色和内容。
var R = new Router();
R.init();
var res = document.getElementById('result');
R.route('/', function() {
res.style.background = 'blue';
res.innerHTML = '这是首页';
});
R.route('/product', function() {
res.style.background = 'orange';
res.innerHTML = '这是产品页';
});
R.route('/server', function() {
res.style.background = 'black';
res.innerHTML = '这是服务页';
});
关于Javascript中怎么实现前端路由就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。