首页 > 代码库 > 前端路由的两种实现
前端路由的两种实现
转载自 http://www.jianshu.com/p/c9de1924d215
1、原理浅析
- hash模式
如果a标签的href属性以"#"开头,那么当点击这个a标签时就会触发hashchange事件,在该事件处理函数中可以做很多事,比如发ajax请求,进行DOM操作替换页面等。 - history模式
hisroty模式相比hash模式,是一种比较新的路由模式,其浏览器兼容性如下:
pushState浏览器兼容性
原理就是利用history.pushState(state,null,url)更新浏览器url地址
2、具体实现
Talk is easy,show you the Code!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hash Test</title> </head> <body> <a href="#1">#1</a> <a href="#2">#2</a> <div id="content"></div> <script type=‘text/js-template‘ class="test" id="1">第一页</script> <script type=‘text/js-template‘ class="test" id="2">第二页</script> <script type="text/javascript"> //1、选取元素 var aElm=document.getElementsByTagName(‘a‘); var array=[].slice.call(aElm) var content=document.getElementById(‘content‘) //2、特性检测,如果支持history模式就用history,否则用hash模式 if (history&&history.pushState) { window.addEventListener(‘popstate‘,handlePage); //劫持a元素的click事件,主要是为了更新history.state的状态以及替换url,当点击url跳转时先执行onclick再触发popstate array.forEach(function(v){ v.onclick=function(event){ var path=event.target.hash.split("#")[1]; var newUrl=location.href.split(‘#‘)[0]+‘\/‘+path; history.pushState({current:path},null,newUrl) } }) } else { window.addEventListener(‘hashchange‘,handlePage); } //3、统一使用handlePage作为两种模式的事件处理器 function handlePage(){ if (history&&history.pushState) { var current=history.state&&history.state.current||‘1‘; render(current) } else { var hash=location.hash||‘#1‘; render(hash,true) } function render(selector,isHashMode){ var hashMode=isHashMode&&true; var select=‘‘; if (hashMode) { select=selector.split(‘#‘)[1]; } else { select=selector||history.state.current } var toPage=document.getElementById(select); content.innerHTML=toPage.innerHTML; } } handlePage(); </script> </body> </html>
3、需要注意的地方
- pushState的第三个参数url是不能跨域的
前端路由的两种实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。