HTML5定義了用于操作歷史記錄的新API,允許您在不重新加載窗口的情況下更改位置.有一篇關于Dive Into HTML5的精彩文章,展示了如何使用歷史API在單頁面應用中模擬多頁面導航.它很容易翻譯成Dart.
在帶導航的單頁應用程序中,我通常設置客戶端代碼的方式類似于在服務器上設置RoR或Django應用程序或Dart http服務器的方式：
>定義一組適用于窗口位置的匹配器
>將匹配器映射到顯示虛擬頁面或其他位置的函數
然后使其成為無縫體驗：
>為所有錨點添加一個用于書簽的href,但添加一個onclick處理程序來調用一個推送歷史狀態的函數,并使用preventDefault來防止重新加載.
>在初始頁面加載時,讀取URL并將其發送到(2)中的地圖
樣品：
main() {
// handle the back button
window.on.popState.add((_) => showPage());
}
showPage() {
String path = window.location.pathname;
if (path == '/') {
showFrontPage();
} else if (DETAIL_PAGE_URL.hasMatch(path)) {
String id = DETAIL_PAGE_URL.firstMatch(path).group(1);
showDetailPage(i);
}
}
showFrontPage() {
//... code to build a link to a detail page
detailAnchor.on.click.add((MouseEvent e) {
window.history.pushState(null,detail.title,detail.url);
e.preventDefault();
showDetailPage(detail);
},false);
}
...)
