現在vueRouter的模式基本都是history模式，它的實現是基于原生事件popstate來實現的。
先看看MDN文檔對這個api的解釋：
當活動歷史記錄條目更改時，將觸發popstate事件。如果被激活的歷史記錄條目是通過對
history.pushState()的調用創建的，或者受到對history.replaceState()的調用的影響，popstate事件的state屬性包含歷史條目的狀態對象的副本。
需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()或者history.forward()方法）
也就是說我們點擊瀏覽器的前進、后退按鈕或者在js中執行history.back()、history.forward()就會觸發popstate事件。
那這個api和vueRouter的history模式有什么關系呢？
我們知道vue項目其實是個單頁應用，大致結構如下：
<html>
<body>
<div id="app">
<router-view />
</div>
</body>
</html>
所以我們在項目中各種跳轉切換頁面，都不會去請求html資源，都是在一個html中完成dom切換，也就是更換route-view標簽里面的內容，但是我們卻可以通過瀏覽器的前進后退按鈕進行頁面切換，實現的關鍵就是去監聽popstate事件，根據相關信息去更換route-view標簽里面的內容。
到這里需要再介紹一個api，history.pushstate
同樣看一下MDN文檔的介紹：
在 HTML 文檔中，
history.pushState()方法向當前瀏覽器會話的歷史堆棧中添加一個狀態（state）。
語法：history.pushState(state, title[, url])
這個api會往瀏覽器的歷史棧添加一個狀態，舉個不太切當的例子：
比如現在在A頁面，然后從A頁面跳轉到B頁面，然后在B頁面執行history.pushState()，此時點擊瀏覽器的后退按鈕不會返回A頁面，而還是在B頁面。
兩個api的MDN文檔，推薦看一遍哦：
popstate
history.pushState
所以vueRouter的history模式簡單來說就是監聽popstate事件，去執行切換顯示dom的事件；然后當路由切換時，執行了history.pushState()，然后手動觸發一遍切換顯示dom的事件。
現在回到標題，在vue中如何攔截瀏覽器的前進后退按鈕呢？最近剛好遇到一個需求，需要此功能來實現：
有一個列表組件list：
<template>
<div class="list">
<Item />
<Item />
<Item />
...
</div>
<template/>
列表頁有很多數據，每條數據只展示基礎信息，然后點擊每條item，要展示每條item的詳情，跳轉到詳情頁。
這種需求非常常見，也有很多種辦法實現，比如動態路由，但是如果是動態路由，那么返回列表頁的時候，列表頁就會刷新，在沒有keep-alive的情況。交互不太友好，我一般都是通過組件切換去實現：
<template>
<div class="list" v-show="!showDetail">
<Item />
<Item />
<Item />
...
</div>
<Deatil v-if="showDetail" />
<template/>
列表通過v-show顯示隱藏，詳情組件通過v-if來觸發初始化。但這樣寫又有一個問題，當顯示詳情頁的時候，通過瀏覽器的后退按鈕是回不到列表頁的，因為他們在同個組件同個路由中，只能通用自己寫的返回按鈕來實現，為了考慮用戶習慣的行為，就要實現在詳情組件中點擊后退按鈕時能返回到列表頁。
結合上面所說，在進入詳情組件的時候，把這個行為當成進入一個新頁面，所以就要往瀏覽器會話的歷史堆棧中添加一個狀態：
// 顯示詳情組件的事件
// id是每一條數據的id，或者是一個標識
const goDetail = (id) => {
showDetail = true
history.pushState({ ...history.state, id }, '')
}
history.state儲存了當前瀏覽器會話的信息，包括前進是什么狀態，后退是什么狀態，上面例子中我往里面添加了一個id；history.pushState有三個參數，第一個參數就是state，第二個參數可以忽略，第三個參數url可選，vueRouter的切換就是通過第三個參數來指定，如果不傳第三個參數，當前url就不會改變。
當執行了上面的goDetail方法后，就會顯示詳情組件。假如列表頁的路由的 /list，從 /home路由跳轉過來的，那當顯示詳情頁的時候，點擊瀏覽器的后退按鈕，因為已經執行了history.pushState，所以不會返回到/home路由，還是在/list路由。
那么怎么實現當在詳情組件的時候，點擊后退按鈕隱藏詳情組件，顯示列表呢？
這時候就需要監聽popstate事件了，我在history.pushState的時候，往state中添加了一個標識，key為id，通過判斷是否有這個標識來切換組件：
onMounted(() => {
window.addEventListener('popstate', toggleDetailShow)
})
const toggleDetailShow = () => {
if (history.state.id) {
showDetail = true
} else {
showDetail = false
}
}
當顯示詳情組件的時候，點擊后退按鈕，觸發了popstate事件，history.state回到未執行history.pushState的狀態，也就是history.state沒有id這個標識，所以會隱藏掉詳情組件；此時，再點擊瀏覽器的前進按鈕，history.state就會返回到執行了history.pushState的狀態，有id這個標識，就會顯示詳情組件。
這樣就顯示了通過瀏覽器的前進后退來控制同個路由下組件的切換。
本文基于在一個組件中切換列表與某條數據的詳情需求來說，對于涉及到的兩個history api還有很多理解不足的地方，如果你有更好的見解，請指教。
我是鴨子，祝你幸福。
