摘要：出于安全的考慮，開發(fā)人員無法得知用戶瀏覽過的。這個方法接受一個參數(shù)，表示向后或向前跳轉(zhuǎn)的頁面數(shù)的一個整數(shù)值。該事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。假定當(dāng)前網(wǎng)頁是。顯示為顯示為顯示為顯示為顯示為顯示為三事件事件是對象上的事件，配合和方法使用。

首先要學(xué)習(xí)一下history對象，history對象保存著用戶的上網(wǎng)記錄，從瀏覽器窗口打開的那一刻算起。出于安全的考慮，開發(fā)人員無法得知用戶瀏覽過的URL。不過，借由用戶訪問過的頁面列表，同樣可以在不知道實際URL的情況下實現(xiàn)后退與前進(jìn)

使用go方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后也可以向前。這個方法接受一個參數(shù)，表示向后或向前跳轉(zhuǎn)的頁面數(shù)的一個整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)(類似瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(zhuǎn)(類似瀏覽器的前進(jìn)按鈕)。來看下例子

//后退一頁
history.go(-1)

//前進(jìn)一頁
history.go(1)

//前進(jìn)兩頁
history.go(2)

也可以給go()方法船體一個字符串參數(shù)，此時瀏覽器會跳轉(zhuǎn)到歷史記錄中包含改字符串的第一個位置，可能后退也可能前進(jìn)，具體要看哪一個位置最近。如果歷史記錄中不包含該字符串，則什么都不做。例如：

//跳轉(zhuǎn)到最近的wrox.com頁面
history.go("wrox.com")

//跳轉(zhuǎn)到最近的douban.cn頁面
history.go("douban.cn")

這兩個方法可以來代替go()，模仿瀏覽器的后退和前進(jìn)功能

back()相當(dāng)于 go(-1) 后退一個頁面

forward相當(dāng)于go(1) 前進(jìn)一個頁面

注：接下來幾個方法是html5新增的方法

該方法的作用是 在歷史記錄中新增一條記錄，改變?yōu)g覽器地址欄的url,但是，不刷新頁面。

pushState對象接受三個參數(shù)，

state：一個與添加的記錄相關(guān)聯(lián)的狀態(tài)對象，主要用于popstate事件。該事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。也就是說，瀏覽器會將這個對象序列化以后保留在本地，重新載入這個頁面的時候，可以拿到這個對象。如果不需要這個對象，此處可以填null。

title：新頁面的標(biāo)題。但是，現(xiàn)在所有瀏覽器都忽視這個參數(shù)，所以這里可以填空字符串。

url：新的網(wǎng)址，必須與當(dāng)前頁面處在同一個域。瀏覽器的地址欄將顯示這個網(wǎng)址。

舉個例子，假設(shè)當(dāng)前網(wǎng)址是hello.com/1.html,使用puchState()方法在瀏覽記錄中添加一個新紀(jì)錄

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

添加新紀(jì)錄后，瀏覽器的地址欄立刻顯示`hello.com/2.html,但不會跳轉(zhuǎn)到2.html,也不會檢查2.html是否存在，它只是成為瀏覽歷史中的最新記錄。

總之，pushState()方法不會觸發(fā)頁面刷新，只是導(dǎo)致history對象發(fā)生變化，地址欄會有反應(yīng)，使用該方法后，就可以使用history.state屬性讀出狀態(tài)對象

var stateObj={foo:"bar"}
history.pushState(starteObj,"","2.html")
history.state //=> {foo:"bar"}

注意：如果pushState的URL參數(shù)設(shè)置了一個新的hash值，并不會觸發(fā)hashchange事件。

replaceState方法的作用是替換當(dāng)前的歷史記錄，其他的都與pushState()方法一模一樣。

假定當(dāng)前網(wǎng)頁是example.com/example.html。

history.pushState({page: 1}, "title 1", "?page=1")
// URL 顯示為 http://example.com/example.html?page=1

history.pushState({page: 2}, "title 2", "?page=2");
// URL 顯示為 http://example.com/example.html?page=2

history.replaceState({page: 3}, "title 3", "?page=3");
// URL 顯示為 http://example.com/example.html?page=3

history.back()
// URL 顯示為 http://example.com/example.html?page=1

history.back()
// URL 顯示為 http://example.com/example.html

history.go(2)
// URL 顯示為 http://example.com/example.html?page=3

popstate事件是window對象上的事件，配合pushState()和replaceState()方法使用。當(dāng)同一個文檔(可以理解為同一個網(wǎng)頁，不能跳轉(zhuǎn)，跳轉(zhuǎn)了就不是同一個網(wǎng)頁了)的瀏覽歷史出現(xiàn)變化時，就會觸發(fā)popstate事件。

上面我們說過，調(diào)用pushState()或者replaceState()方法都會改變當(dāng)前的歷史記錄，僅僅調(diào)用pushState()方法或replaceState()方法 ，并不會觸發(fā)該事件，另外一個條件是用戶必須點擊瀏覽器的倒退按鈕或者前進(jìn)按鈕，或者使用js調(diào)用history.back()或者h(yuǎn)istory.forward()等方法。

所以，記住popstate事件觸發(fā)的條件

1. 處在同一個文檔(同一個html頁面)
2. 文檔的瀏覽歷史(即history對象)發(fā)生改變

只要符合這兩個條件，popstate事件就會觸發(fā)

具體例子

//index.html

    


    
    后退
    前進(jìn)
    
    pushState    

先點擊pushState按鈕，在點擊后退按鈕，就會觸發(fā)popstate事件

再來一個例子

//index.html

    


    #one   

直接點擊a標(biāo)簽,也可以觸發(fā)popstate事件

圖片來自mdn傳送門

前端路由的本質(zhì)是監(jiān)聽 URL 的變化，然后匹配路由規(guī)則，顯示相應(yīng)的頁面，并且無須刷新。

目前單頁面使用的路由就只有兩種實現(xiàn)方式

hash模式

history模式

www.test.com/##/就是Hash URL,當(dāng)##后面的哈希值發(fā)生變化時，不會向服務(wù)器請求數(shù)據(jù)，可以通過hashchange事件來監(jiān)聽到URL的變化，從而進(jìn)行跳轉(zhuǎn)頁面

網(wǎng)上偷來的一張圖：

history模式相比hash模式更美觀，需要用到Html5新增的幾個api實現(xiàn)，原理如下：

繼續(xù)偷圖：

在介紹實例前先介紹下location對象，location對象提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息。它包含以下屬性：

我們在下方的示例中需要用到pathname屬性拿到訪問的路徑

一個簡單的history模式單頁面路由實現(xiàn)如下：

//1. 路由規(guī)則
const routes={
    "/user":user, //user是引入的視圖   import user from "./view/user" 
    "/about":about
}
//2. 路由控制類
class Router {
  start() {
    // 點擊瀏覽器后退/前進(jìn)按鈕時會觸發(fā)window.onpopstate事件, 我們在這時切換到相應(yīng)頁面
    // https://developer.mozilla.org/en-US/docs/Web/Events/popstate
    window.addEventListener("popstate", () => {
      this.load(location.pathname)
    })

    // 打開頁面時加載當(dāng)前頁面 在單頁面入口文件中要調(diào)用start方法
    this.load(location.pathname)
  }

  // 前往path, 變更地址欄URL, 并加載相應(yīng)頁面
  go(path) {
    // 變更地址欄URL
    history.pushState({}, "", path)
    // 加載頁面
    this.load(path)
  }

  // 加載path路徑的頁面
  load(path) {
    // 首頁
    if (path === "/") path = "/foo"
    // 創(chuàng)建頁面實例
    const view = new routes[path]()
    // 調(diào)用頁面方法, 把頁面加載到document.body中
    view.mount(document.body)
  }
}

Router類的作用是控制頁面根據(jù)當(dāng)前Url切換

start()

作用1： 監(jiān)聽onpopstate事件，在瀏覽器前進(jìn)或后退時加載相應(yīng)的頁面

作用2： 打開頁面時加載當(dāng)前頁面,需要在單頁面的入口文件引入，并執(zhí)行

go(path)

跳轉(zhuǎn)到path對應(yīng)的頁面

load(path)

加載path路徑的頁面

高程三 p215(history對象) p207(location對象)

JavaScript標(biāo)準(zhǔn)參考教程-阮一峰

interviewMap