hash 介紹
https://xxx/xxx/xxx.html#look
代表網(wǎng)頁中的一個位置豺旬。瀏覽器讀取這個URL后，會自動將#后面的標(biāo)識符的位置滾動至可視區(qū)域柒凉。
可通過下面的方法族阅，為網(wǎng)頁位置指定標(biāo)識符。
- 使用錨點膝捞，
<a name="look"></a> - 使用id屬性坦刀，
<p id="look">。
# 的一些特性
- # 是用來指導(dǎo)瀏覽器動作的蔬咬，對服務(wù)器端完全無用鲤遥。所以，HTTP請求中不包括#林艘。
- 改變#盖奈，網(wǎng)頁不會刷新
- 改變#會改變?yōu)g覽器的訪問歷史
讀取 # 值
通過 window.location.hash 讀取#值，同時也可以通過 window.location.hash 設(shè)置 # 值 狐援，同時產(chǎn)生一條歷史記錄钢坦。
通過Hash實現(xiàn)前端路由
路由的本質(zhì)就是頁面的URL發(fā)生改變時究孕，頁面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁面不會刷新爹凹。根據(jù)上述厨诸，hash 的特點，可以通過 Hash實現(xiàn)前端路由禾酱。
hashchange 是可以監(jiān)聽到的微酬，我們可以在監(jiān)聽事件的回調(diào)函數(shù)中，展示和隱藏不同UI顯示的功能宇植，從而實現(xiàn)前端路由得封。
onhashchange事件
這是一個HTML 5新增的事件埋心，當(dāng)#值發(fā)生變化時指郁，就會觸發(fā)這個事件。IE8+拷呆、Firefox 3.6+闲坎、Chrome 5+、Safari 4.0+支持該事件茬斧。
它的使用方法有三種：
- window.onhashchange = function(event){...};
<div onhashchange="func();">- window.addEventListener("hashchange"腰懂，function(event){...}, false);
對于不支持onhashchange的瀏覽器，可以用setInterval監(jiān)控location.hash的變化项秉。
hash的優(yōu)缺點
優(yōu)點:
- 只需要前端配置路由表, 不需要后端的參與
- 兼容性好, 瀏覽器都能支持
- hash值改變不會向后端發(fā)送請求, 完全屬于前端路由
缺點:
- hash值前面需要加#, 不符合url規(guī)范,也不美觀
- 服務(wù)器端無法準(zhǔn)確跟蹤前端路由信息
- 與錨點定位元素的功能沖突
