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

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

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

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

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

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

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

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

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

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

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

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

注：接下來(lái)幾個(gè)方法是html5新增的方法

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

pushState對(duì)象接受三個(gè)參數(shù)，

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

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

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

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

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

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

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

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

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

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

假定當(dāng)前網(wǎng)頁(yè)是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對(duì)象上的事件，配合pushState()和replaceState()方法使用。當(dāng)同一個(gè)文檔(可以理解為同一個(gè)網(wǎng)頁(yè)，不能跳轉(zhuǎn)，跳轉(zhuǎn)了就不是同一個(gè)網(wǎng)頁(yè)了)的瀏覽歷史出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件。

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

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

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

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

具體例子

//index.html

    


    
    后退
    前進(jìn)
    
    pushState    

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

再來(lái)一個(gè)例子

//index.html

    


    #one   

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

圖片來(lái)自mdn傳送門

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

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

hash模式

history模式

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

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

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

繼續(xù)偷圖：

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

我們?cè)谙路降氖纠行枰玫?b>pathname屬性拿到訪問(wèn)的路徑

一個(gè)簡(jiǎn)單的history模式單頁(yè)面路由實(shí)現(xiàn)如下：

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

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

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

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

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

start()

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

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

go(path)

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

load(path)

加載path路徑的頁(yè)面

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

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

interviewMap