mounted () {
// 禁用瀏覽器返回鍵
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.disableBrowserBack);
},
destroyed() {
// 清除popstate事件 否則會影響到其他頁面
window.removeEventListener("popstate", this.disableBrowserBack, false);
},
methods: {
disableBrowserBack() {
history.pushState(null, null, document.URL);
}
}
history的認識
history 對象包含瀏覽器歷史。
常見屬性/方法：
- history.length - 屬性保存着歷史記錄的 URL 數量；
- history.back() - 等同於在瀏覽器點擊后退按鈕；
- history.forward() - 等同於在瀏覽器中點擊前進按鈕；
- history.go() - 加載 history 列表中的某個具體頁面。
H5新增了屬性/方法/事件：
- history.state - 屬性用來保存記錄對象；
- history.pushState() - 向瀏覽器的歷史記錄中添加一個狀態；
- history.replaceState() - 修改當前歷史記錄實體；
- popstate事件 - 當活動歷史記錄條目更改時，將觸發
（1）.history.state
返回當前頁面的 state 對象
（2）.history.pushState(state, title, url)
state: 狀態對象可以是任何可以序列化的對象。
title: 當前大多數瀏覽器都忽略此參數，盡管將來可能會使用它。
url: 新歷史記錄條目的 URL 由此參數指定。如果未指定此參數，則將其設置為文檔的當前 URL。
3.history.replaceState(state, title, url)
修改當前歷史記錄實體，如果你想更新當前的 state 對象或者當前歷史實體的 URL 來響應用戶的的動作的話這個方法將會非常有用。參數與 pushState 類似。
4.popstate事件
當活動歷史記錄條目更改時，將觸發 popstate 事件。
需要注意的是調用 history.pushState() 或 history.replaceState() 不會觸發 popstate 事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在 Javascript 代碼中調用 history.back() 或者 history.forward() 方法）。
不同的瀏覽器在加載頁面時處理 popstate 事件的形式存在差異。頁面加載時 Chrome 和 Safari 通常會觸發(emit ) popstate 事件，但 Firefox 則不會