做一個後臺管理系統的時候，用到了admin-lte框架。不過其實大部分後臺管理系統都是這樣的設計，即，左邊是可以縮排的選單欄，右邊是內容，使用者點選選單的時候，選單欄和上邊的使用者資訊欄並不會重新載入，也就是不會跳轉到新的頁面，緊緊是更新了右邊的內容模組。

跟大多數人一樣，我使用的是jquery的load()方法，如下所示：

<li><a href="javascript:loadMenu('<%=request.getContextPath()%>/commons/redirect.do?path=management/user_list')">使用者列表</a
 
></li>

<li><a href="javascript:loadMenu('<%=request.getContextPath()%>/commons/redirect.do?path=management/department_list')"></i>歸屬部門</a></li>
...
<script>
    function loadMenu(path, parameter) {
        $('#main-content').load(path, parameter);
    }

    $(function
 
 () {
        var defaultPath = '<%=request.getContextPath()%>/commons/redirect.do?path=task/task_list';
        loadMenu(defaultPath);
    });
</script>

上述的程式碼中，定義了一個loadMenu方法，按鈕點選的時候呼叫此方法，將新的內容頁面載入到main-content這個<div>塊中，實現了選單欄不重新整理、內容變化的功能。當第一次進入此頁面時，自動呼叫loadMenu方法，載入預設頁面。

然而這種實現方式有一種缺陷：當用戶點選前進按鈕、後退按鈕、重新整理按鈕時，由於實際上使用者只訪問了一個頁面，其他的“功能頁面”都是更新此頁面中的main-content

下面提出一種解決方案，實測有效：

...
<script>

    $(function () {
        $.refresh()
    })

    function loadMenu(path, parameter) {
        $.pushState(path, parameter)
        $.loadPage(path, parameter)
    }

    $.extend(
        {
            loadPage: function (url, data) {
                console.log('loading url: ' + url)
                $('#main-content').load(url, data);
            },
            pushState: function (url, data) {
                console.log("pushing state: " + url)
                history.pushState({urlStr: url, data: data}, "頁面標題", "?_url=" + url);
            },

            popState: function () {
                window.addEventListener("popstate", function () {
                    var currentState = history.state
                    if (currentState != null) {
                        var url = ".." + currentState.urlStr
                        console.log('poping state: ' + url)
                        $.loadPage(url, currentState.data)
                    }
                })
            },

            refresh: function () {
                var currentState = history.state;
                if (currentState != null) {
                    var loadUrl = ".." + currentState.urlStr
                    console.log('refreshing state: ' + loadUrl)
                    $.loadPage(loadUrl, currentState.date)
                }else{
                    var defaultPath = '<%=request.getContextPath()%>/commons/redirect.do?path=task/task_list';
                    loadMenu(defaultPath)
                }
            }
        }
    )

    $.popState()
</script>

如上述程式碼，我們拓展了popState/refresh方法，當用戶點選前進(後退)、重新整理按鈕時會分別觸發這兩個方法, 然後在方法中獲取到使用者（這裡指我…）期望的路徑，通過load方法將這些內容載入。

那麼這些“記錄”是如何儲存和獲取的呢？當用戶點選選單（按鈕），呼叫loadMenu方法時，我們先呼叫pushState方法，將他要訪問的頁面新增到歷史記錄history.pushState,然後在前進、後退、重新整理時獲取到對應的歷史記錄history.state，通過load方法載入這些內容飢渴。並且引數也可以通過對應data欄位儲存和獲取。

實測有效，不過還需要考慮，載入頁面後選單欄的active問題。可以通過傳遞的引數來判斷，修改className，這裡不贅述。