前端路由實現（history）
瞭解：
HTML5 history新增了兩個API:history.pushState和history.replaceState
兩個api都接受三個引數
-
狀態物件（state object）：一個JavaScript物件，與用pushState()方法建立的新歷史記錄條目關聯。無論何時使用者導航到新建立的狀態，popstate事件都會被觸發，並且事件物件的state屬性都包含歷史記錄條目的狀態物件的拷貝。
-
標題（title）：FireFox瀏覽器目前會忽略該引數，雖然以後可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字串會比較安全。或者，你也可以傳入一個簡短的標題，標明將要進入的狀態。
-
地址（URL）： 新的歷史記錄條目的地址。瀏覽器不會在呼叫pushState()方法後載入該地址，但之後，可能會試圖載入，例如使用者重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與當前URL應該是同源的，否則，pushState()會丟擲異常。該引數是可選的；不指定的話則為文件當前URL。
相同之處是兩個API都會操作瀏覽器的歷史記錄，而不會引起頁面的重新整理。不同之處在於pushState會增加一條新的歷史記錄，而replaceState則會替換當前的歷史記錄
大家可以先在控制檯試試，看看位址列發生了什麼變化
window.history.pushState(null, null, "test");
window.history.pushState(null, null, "/test");
window.history.pushState(null, null, "#/hello");
window.history.pushState(null, null, "?name=");
</code></pre>
複製程式碼例項演示
建立html檔案，index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>前端路由實現</title>
<style>
.warp{
width:400px;
height:400px;
border:1px solid grey;
margin:0 auto;
}
.nav{
border-bottom:1px solid grey;
}
.nav li{
display:inline-block;
list-style:none;
}
.nav li a{
display:inline-block;
text-decoration: none;
padding:10px 15px;
}
.router{
padding:20px;
}
a{
cursor: pointer;
}
</style>
</head>
<body>
<section class="warp">
<div class="nav">
<ul>
<li><a href="javascript:void(0)" data-path="index">首頁</a></li>
<li><a href="javascript:void(0)" data-path="news">新聞</a></li>
<li><a href="javascript:void(0)" data-path="about">關於</a></li>
</ul>
</div>
<div id="router" class="router">
<!-- 內容載入區域 -->
</div>
</section>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./router.js"></script>
</body>
</html>
複製程式碼此時的頁面為：
引入js檔案router.js
(function(){
history.replaceState(null,null,'');//最開始的狀態，採用replace直接替換
$('#router').html('<p>顯示內容區域</p>')
$('a').on('click',function(){
console.log(this.text)
var text = this.text;
$('#router').html('<p>'+ text +'</p>')
history.pushState(null,null,'#/'+text);
})
})()
複製程式碼此時點選導航按鈕時
- 此時當點選不同的導航項的時候，位址列上的路由進行了對應的改變，展現的內容區域也發生了變化。但是實際上這個並沒有實現路由的真正含義。因為內容部分的改變是根據事件的觸發而獲得當前的內容。
- 此時如果點選瀏覽的前進和後退按鈕，內容是無法監聽到位址列的變化而作出改變的
在此基礎上變動一下實現方式，將router.js改為：
// 狀態版
(function(){
var count = [0,0,0]
$('#router').html('<p>首頁</p>'+count[0]+'<p>新聞</p>'+count[1]+'<p>關於</p>'+count[2])
// history.replaceState(count,null,'');//最開始的狀態，採用replace直接替換
for(var i = 0 ; i<$('a').length; i++){
$('a')[i].index = i
$('a').eq(i).on('click',function(){
console.log(this.index);
var index = this.index;
count[index]++;
$('#router').html('<p>首頁</p>'+count[0]+'<p>新聞</p>'+count[1]+'<p>關於</p>'+count[2])
console.log(count)
history.pushState(count,null,'#/count'+count[index]);//之後的狀態，需要進行儲存
})
}
//監聽history其他api導致位址列url改變事件
window.addEventListener('popstate',function(e){
console.log(e.state);
var state = e.state;
$('#router').html('<p>首頁</p>'+state[0]+'<p>新聞</p>'+state[1]+'<p>關於</p>'+state[2])
})
})()
複製程式碼此時的思路是做一個狀態記錄，記錄下每個導航按鈕被點選的次數。當每次執行點選導航欄切換的時候，通過history.pushState（count， null, '#/count'+count[index]）這個api,傳遞了狀態物件在內，並在第三個引數中將當前已點選數作為位址列的顯示資料。示例如下：
- !!當活動歷史記錄條目更改時，將觸發popstate事件。如果被啟用的歷史記錄條目是通過對history.pushState（）的呼叫建立的，或者受到對history.replaceState（）的呼叫的影響，popstate事件的state屬性包含歷史條目的狀態物件的副本。
- 需要注意的是呼叫history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如使用者點選瀏覽器的回退按鈕（或者在Javascript程式碼中呼叫history.back()）
此處通過記錄下每次的點選次數來解釋了pushState的用法以及引數，其實簡單的寫法可以表達為：
(function(){
var url = '內容展示';
history.replaceState(url,null,'');//最開始的狀態，採用replace直接替換
$('#router').html('<p>'+url+'</p>')
$('a').on('click',function(){
console.log(this.text)
url = this.text;
$('#router').html('<p>'+ url +'</p>')
history.pushState(url,null,'#/'+url);
})
window.addEventListener('popstate',function(e){
console.log(e.state);
url = e.state
$('#router').html('<p>'+ url +'</p>')
});
})()
複製程式碼