大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Javascript中怎么实现前端路由-创新互联

这篇文章给大家介绍Javascript中怎么实现前端路由,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

成都创新互联公司长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为大箐山企业提供专业的成都网站建设、成都做网站,大箐山网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
HTML

页面中有一个导航菜单ul,和一个p#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), 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中怎么实现前端路由就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:Javascript中怎么实现前端路由-创新互联
URL标题:http://dzwzjz.com/article/dcdhsp.html
在线咨询
服务热线
服务热线:028-86922220
TOP