1、原理淺析
- hash模式
如果a標簽的href屬性以"#"開頭，那么當點擊這個a標簽時就會觸發hashchange事件，在該事件處理函數中可以做很多事，比如發ajax請求，進行DOM操作替換頁面等。 - history模式
hisroty模式相比hash模式，是一種比較新的路由模式，其瀏覽器兼容性如下：
pushState瀏覽器兼容性
原理就是利用history.pushState(state,null,url)更新瀏覽器url地址，這會觸發 popstate 事件
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是不能跨域的
- 純粹的用JS調用pushState并不能觸發popstate事件，只有瀏覽器的前進返回或者用戶點擊頁面操作才能觸發popstate。若想監聽到所有的 pushState，則可以采用自定義事件的方法：
//創建全局事件
var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
//重寫方法
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
//實現監聽
window.addEventListener('replaceState', function(e) {
console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
console.log('THEY DID IT AGAIN! pushState 2222222');
});
- history 模式刷新頁面無效問題(webpack設置 publicPath 必須為絕對路徑才行)
location /{
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
