一、什么是 History
1. 概述
history 是歷史記錄管理。點擊 a 標簽跳轉或者點擊瀏覽器后退按鈕,總之頁面進行跳轉時,history 都會記錄這一步操作,方便后面 go、back 等操作。
三種 history:
- hashHistory 老版本瀏覽器的 history。
- browserHistory h5的history。現在的 web 項目都使用這種。
- memoryHistory node環境下的 history,存儲在 memory中。
2. 如何辨別 history 屬于哪一種?
瀏覽器地址看地址url,如果有 #,那么就是 hashHistory了;
-
在代碼中 'pushState' in window.history 如果為 true 說明是 browserHistory。
這是因為 browserHistory API 有 pushState, replaceState, popState。保持 ui(頁面) 和 url(瀏覽器地址欄地址) 同步。地址欄地址變化,頁面也同步變化。
3. browserHistory 為什么會出現,相對 hashHistory 有什么進步?
-
hashHistory 連續點擊同一個鏈接會報錯
使用 hashHistory,連續點擊一個鏈接會報錯:Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
but 使用 browserHistory 就不會出現這種情況。連續點擊一個鏈接,第二次依然會有反應,但不會報錯。產生這種差異的原因是機制問題,hashHistory 制作一個棧來存放歷史記錄,且不允許連續兩個歷史記錄相同。browserHistory 就允許連續兩次歷史記錄相同。
測試:連續點擊一個鏈接四次,再點擊瀏覽器的后退按鈕,看
hashHistory 與 browserHistory 的差別。 還有一個差異:hashHistory 不能很好的支持 basename。
4. 如何查看 history 中歷史記錄。
直接查看具體的歷史記錄只能到瀏覽器-選項-歷史記錄中查看。
通過代碼的形式查看 window.history 打印出對象有個 length 屬性,記錄歷史記錄的條數。點擊一條鏈接之后再打印 window.history 可以查看變化。
補充:瀏覽器中一個選項卡會單獨記錄它的歷史記錄,關閉瀏覽器選項卡重新打開之后又會從 1 開始計數。
二、dva 中如何使用 History
dva 官方文檔提供的 api 可自由選擇使用哪種 history,但是測試時貌似不行,只能使用 hashHistory,這個 bug 截止 2.0.3 版本還未修復。
import { browserHistory } from 'dva/router';
const app = dva({
history: browserHistory,
});
【替代方法】使用 history
這個第三方庫。
-
安裝
$ npm install history
-
修改 index.js 文件
import { createBrowserHistory as createHistory } from 'history'; const app = dva({ history: createHistory() });
通過以上配置就已經使用了 browserHistory 了,如果這里沒有感官認識,可以換成 hashHistory 刷新頁面觀察瀏覽器地址欄變化。
- 創建 hashHistory:
import { createHashHistory as createHistory } from 'history';
- 創建 memoryHistory:
import { createMemoryHistory as createHistory } from 'history';