最近研究vue-router單頁轉跳而不向服務器請求的原理，

主要是HTML5 history以及hash的應用，支持history時使用history模式

下面詳細學習了一下常用的history相關的API

常用API：

1.history.length：

返回當前頁面所產生的歷史記錄個數，即在同一個瀏覽器tab下產生的歷史記錄；

2.history.pushState(state,title,URL)：

向瀏覽器新增一條歷史記錄，但是不會刷新當前頁面（不會重載），其中state為對象，可以用作攜帶信息用，title：目前來看沒啥用一般為空或null，URL：即要更改頁面的URL，且必須同源，不能跨域；

3.history.replaceState(state,title,URL):

更改當前瀏覽器的歷史記錄，即把當前執行此代碼頁面的記錄給替換掉，參數與第二條相同；

4.history.back()、history.forward()、history.go()：

分別為前進一個歷史，後退一個，history.go(Number)，其中Number可正可負，即向前或向後若幹個記錄

5.history.state：

返回當前頁面狀態參數，此參數一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附帶的state值，例子如下：

當前頁面為http://example.com

history.pushState({a:1},null,"test1");//http://example.com/test1
history.state;    //{a:1}
 
history.pushState({b:2},null,"test2");//http://example.com/test2
history.state;    //{b:2}
 
history.back();    //http://example.com/test1
history.state;    //{a:1}
 
history.back();    //http://example.com
history.state;    //
 
null

上面例子應該已經很明確的表明state的取值，即當前頁面的狀態值，沒有狀態值為null；

6.history事件onpopstate:

window.onpopstate = function(e){
    console.log(e.state);
}

在history.back(),history.forward(),history.go()時觸發此事件，但是在history.pushState();history.replaceState();時並不會觸發此事件，事件內可以獲取到state狀態值

由此可以看出vue-router中push()、go()等函數的一些端倪，但是vue-router比這個要復雜，

history是其基礎之一

HTML5 history詳解