hash 介紹
https://xxx/xxx/xxx.html#look
代表網頁中的一個位置。瀏覽器讀取這個URL后，會自動將#后面的標識符的位置滾動至可視區域。
可通過下面的方法，為網頁位置指定標識符。
- 使用錨點，
<a name="look"></a> - 使用id屬性，
<p id="look">。
# 的一些特性
- # 是用來指導瀏覽器動作的，對服務器端完全無用。所以，HTTP請求中不包括#。
- 改變#，網頁不會刷新
- 改變#會改變瀏覽器的訪問歷史
讀取 # 值
通過 window.location.hash 讀取#值，同時也可以通過 window.location.hash 設置 # 值 ，同時產生一條歷史記錄。
通過Hash實現前端路由
路由的本質就是頁面的URL發生改變時，頁面的顯示結果可以根據URL的變化而變化，但是頁面不會刷新。根據上述，hash 的特點，可以通過 Hash實現前端路由。
hashchange 是可以監聽到的，我們可以在監聽事件的回調函數中，展示和隱藏不同UI顯示的功能，從而實現前端路由。
onhashchange事件
這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。
它的使用方法有三種：
- window.onhashchange = function(event){...};
<div onhashchange="func();">- window.addEventListener("hashchange"，function(event){...}, false);
對于不支持onhashchange的瀏覽器，可以用setInterval監控location.hash的變化。
hash的優缺點
優點:
- 只需要前端配置路由表, 不需要后端的參與
- 兼容性好, 瀏覽器都能支持
- hash值改變不會向后端發送請求, 完全屬于前端路由
缺點:
- hash值前面需要加#, 不符合url規范,也不美觀
- 服務器端無法準確跟蹤前端路由信息
- 與錨點定位元素的功能沖突
