剛看的惹盼,存儲一下
1.單頁路由是什么澡刹?(這是自己的理解)
單頁路由就是只在不需要產(chǎn)生或重新加載新頁面的前提下字旭,完成內(nèi)容的更新
2.實現(xiàn)的方法
1.url完全不動型(頁面怎么改變锉矢,url就是不變)
工具:ajax方法
ajax的意義就是異步加載藕溅,在不需要重載頁面的前提下棚壁,更新部分內(nèi)容杯矩。
2.帶#型
工具:window.hashchange
原理就是用該工具監(jiān)聽#后面參數(shù)的變化,執(zhí)行js代碼
3.不帶#型
工具:history API(HTML5新東西)
原理:利用監(jiān)聽歷史記錄點進行路由
需要的函數(shù):
1.history.pushState 是將指定的URL添加到瀏覽器歷史里,存儲當(dāng)前歷史記錄點API
2.history.replaceState 是將指定的URL替換當(dāng)前的URL,替換當(dāng)前歷史記錄點
注:1與2的不同在于1會在window.history里創(chuàng)建歷史記錄點袖外,2不會創(chuàng)建
3.history.state 當(dāng)前URL下對應(yīng)的狀態(tài)信息
4.window.onpopstate 監(jiān)聽歷史記錄點史隆,也就是說監(jiān)聽URL的變化,但會忽略URL的hash部分曼验。
history.go和history.back(包括用戶按瀏覽器歷史前進后退按鈕)觸發(fā)泌射,
并且頁面無刷的時候(由于使用pushState修改了history)會觸發(fā)popstate事件粘姜,
事件發(fā)生時瀏覽器會從history中取出URL和對應(yīng)的state對象替換當(dāng)前的URL和history.state。
通過event.state也可以獲取history.state熔酷。