hash 介紹
https://xxx/xxx/xxx.html#look
代表網(wǎng)頁中的一個位置。瀏覽器讀取這個URL后，會自動將#后面的標(biāo)識符的位置滾動至可視區(qū)域。
可通過下面的方法，為網(wǎng)頁位置指定標(biāo)識符。
- 使用錨點(diǎn)，
<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實(shí)現(xiàn)前端路由
路由的本質(zhì)就是頁面的URL發(fā)生改變時，頁面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁面不會刷新。根據(jù)上述，hash 的特點(diǎn)，可以通過 Hash實(shí)現(xiàn)前端路由。
hashchange 是可以監(jiān)聽到的，我們可以在監(jiān)聽事件的回調(diào)函數(shù)中，展示和隱藏不同UI顯示的功能，從而實(shí)現(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)缺點(diǎn)
優(yōu)點(diǎn):
- 只需要前端配置路由表, 不需要后端的參與
- 兼容性好, 瀏覽器都能支持
- hash值改變不會向后端發(fā)送請求, 完全屬于前端路由
缺點(diǎn):
- hash值前面需要加#, 不符合url規(guī)范,也不美觀
- 服務(wù)器端無法準(zhǔn)確跟蹤前端路由信息
- 與錨點(diǎn)定位元素的功能沖突
