摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發(fā)使用的時候，可以為事件指定回調函數(shù)或者回調函數(shù)的參數(shù)是一個事件對象，它的屬性指向和方法為當前所提供的狀態(tài)對象即這兩個方法的第一個參數(shù)。

一、history

window.history(可直接寫成history)指向History對象，它表示當前窗口的瀏覽歷史。
History對象保存了當前窗口訪問過的所有頁面網(wǎng)址

1. length

   history.length屬性保存著歷史記錄的url數(shù)量，初始時該值為1，如果當前窗口先后訪問了三個網(wǎng)址，那么history對象就包括3項，history.length=3

2.跳轉方法：允許在瀏覽器歷史之間移動

go()  接受一個整數(shù)為參數(shù)，移動到該整數(shù)指定的頁面，比如history.go(1)相當于history.forward(),history.go(-1)相當于history.back(),history.go(0)相當于刷新當前頁面
back()  移動到上一個訪問頁面，等同于瀏覽器的后退鍵,常見的返回上一頁就可以用back()，是從瀏覽器緩存中加載，而不是重新要求服務器發(fā)送新的網(wǎng)頁
forward()  移動到下一個訪問頁面，等同于瀏覽器的前進鍵

如果移動的位置超出了訪問歷史的邊界，以上三個方法并不報錯，而是默默的失敗

3.history.pushState()

在瀏覽器歷史中添加記錄

if(!!(window.hostory && history.pushState)) {
    // 支持History API
} else {
    // 不支持
}

以上代碼可以用來檢查當前瀏覽器是否支持History API。如果不支持的話可以考慮使用Polyfill庫History.js

history.pushstate()方法接受三個參數(shù)，以此為：

state: 一個與指定網(wǎng)址相關的狀態(tài)對象，popState事件觸發(fā)時，該對象會傳入回調函數(shù)，如果不需要這個對象，此處可填null
title: 新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null
url: 新的網(wǎng)址，必須與當前頁面處在同一個域，瀏覽器的地址欄將顯示這個網(wǎng)址

假定當前網(wǎng)址是example.com/1.html，我們使用pushState方法在瀏覽記錄(history對象)中添加一個記錄

var stateObj = {foo:"bar"};
history.pushState(stateObj,"page 2","2.html")

添加上邊這個新紀錄后，瀏覽器地址欄立刻顯示example.com/2.html，但不會跳轉到2.html，甚至也不會檢查2.html是否存在，它只是成為瀏覽歷史中的新紀錄。這時，你在地址欄輸入一個新的地址，然后點擊了后退按鈕，頁面的url將顯示2.html；你再點擊以此后退按鈕，url將顯示1.html
總之，pushState方法不會觸發(fā)頁面刷新，只是導致了history對象發(fā)生變化，地址欄會有反應。
如果pushState的url參數(shù)，設置了一個新的錨點值（即hash），并不會觸發(fā)hashChange事件，如果設置了一個跨域網(wǎng)址，則會報錯。

//報錯
history.pushState(null,null,"https://twitter.com/hello")

上邊代碼中，pushState()想要插入一個跨域的網(wǎng)址，導致報錯，這樣設計的目的是防止惡意代碼讓用戶以為他們是在另一個網(wǎng)站上

4. history.replaceState()
history.replaceState()方法的參數(shù)和pushState()方法一摸一樣，區(qū)別是它修改瀏覽器歷史當中的記錄
假定當前頁面是example.com/example.html

history.pushState({page:1},"title 1","?page=1")
history.pushState({page:2},"title 2","?page=2")
history.replaceState({page:3},"title 3","?page=3")

history.back() //url顯示為example.com/example.html?page=1
history.back() //url顯示為example.com/example.html
history.go(2) //url顯示為example.com/example.html?page=3

5. history.state屬性
history.state返回當前頁面的state對象

history.pushState({page:1},"title 1","?page=1")
history.state  //{page:1}

5. popState 事件
每當同一個文檔的瀏覽歷史（即history）出現(xiàn)變化時，就會觸發(fā)popState事件
需要注意：僅僅調用pushState方法或replaceState方法，并不會觸發(fā)該事件，只有用戶點擊瀏覽器后退和前進按鈕時，或者使用js調用back、forward、go方法時才會觸發(fā)。另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發(fā)
使用的時候，可以為popState事件指定回調函數(shù)

window.onpopstate = function (event) {
  console.log("location: " + document.location);
  console.log("state: " +JSON.stringify(event.state));
};

// 或者

window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});

回調函數(shù)的參數(shù)是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前url所提供的狀態(tài)對象（即這兩個方法的第一個參數(shù)）。上邊代碼中的event.state就是通過pushState和replaceState方法為當前url綁定的state對象
這個state也可以直接通過history對象讀取
history.state
注意：頁面第一次加載的時候，瀏覽器不會觸發(fā)popState事件

6.history.scrollRestoration

history.scrollRestoration = "manual";關閉瀏覽器自動滾動行為
history.scrollRestoration = "auto";打開瀏覽器自動滾動行為(默認)

二、hash
hash 就是指 url 尾巴后的 # 號以及后面的字符。這里的 # 和 css 里的 # 是一個意思。hash 也 稱作 錨點，本身是用來做頁面定位的，她可以使對應 id 的元素顯示在可視區(qū)域內。

通過window.location.hash獲取hash值

延伸：
window.location對象里面
hash  ： 設置或返回從 (#) 開始的 URL（錨）。
host  ： 設置或返回主機名和當前 URL 的端口號。
hostname：設置或返回當前 URL 的主機名。
href ： 設置或返回完整的 URL。
pathname： 設置或返回當前 URL 的路徑部分。
port：設置或返回當前 URL 的端口號。
search ： 設置或返回從問號 (?) 開始的 URL（查詢部分）。
assign() ： 加載新的文檔。
reload() ： 重新加載當前文檔。
replace() ： 用新的文檔替換當前文檔。

hash主要是一個事件：hashchange,當hash值改變時會觸發(fā)這個事件
語法：window.onhashchange = fun
或者：
以上事件將覆蓋現(xiàn)有的事件處理程序，為了添加一個新的事件處理程序，而不覆蓋已有的其他的事件處理程序，可以使用函數(shù)"addEventListener"

window.addEventListener("hashchange",fun,false)

例子：

if("onhashchange" in window) {
   alert("該瀏覽器支持 hashchange 事件!");
}
function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}
window.onhashchange = locationHashChanged;

hashchange事件有兩個屬性：

newURL: string類型，當前頁面新的url
oldURL: string類型，當前頁面舊的url


window.addEventListener("hashchange", function (e) {
  console.log(e.newURL,e.oldURL)
  var str = e.newURL.split("#")[1]
  document.getElementById("num").innerHTML = str.split("=")[1]
})

三、vue-router中history和hash兩種模式的區(qū)別

在vue的路由配置中有mode選項 最直觀的區(qū)別就是在url中hash帶了一個很丑的#，而history是沒有#的

mode:"hash",
mode:"history"

hash和history模式的不同