最近被問(wèn)到VueRouter的兩種模式的區(qū)別，答：Hash模式url上有#號(hào)，History模式url上沒有#岂昭。完！
也不知道這么回答對(duì)不對(duì)狠怨，就看了看資料约啊，發(fā)現(xiàn)也就是這個(gè)意思吧邑遏！
Vue-Router中有兩種URL模式，一個(gè)是Hash(默認(rèn))棍苹，一個(gè)是History模式。
const router = new VueRouter({
mode: 'history',
routes: [{...}]
})
History模式需要后臺(tái)設(shè)置茵汰，具體設(shè)置請(qǐng)看文檔
說(shuō)說(shuō)這個(gè)#的是什么
1. #的含義
#（Hash）代表網(wǎng)頁(yè)中的一個(gè)位置枢里，右邊就是該位置的標(biāo)識(shí)符，2010年twitter第一次將#用到URL中蹂午，（這是主流網(wǎng)站第一次大規(guī)模的使用）栏豺，比如：http://www.example.com/index.html#print 就代表網(wǎng)頁(yè)中index.html的print位置。瀏覽器讀取這個(gè)URL后會(huì)自動(dòng)將頁(yè)面滾動(dòng)到print這個(gè)標(biāo)識(shí)符的位置豆胸，在html中指定標(biāo)識(shí)符的方法有兩種：
1.使用錨點(diǎn) <a name="print"></a>
2.使用id屬性<div id="print"></div>
2. http請(qǐng)求完全忽略 #
#是用來(lái)指示瀏覽器的動(dòng)作奥洼，對(duì)服務(wù)器完全無(wú)用，所以http請(qǐng)求中沒有#晚胡，比如訪http://www.example.com/index.html#print
GET index.html HTTP/1.1
Host: www.example.com //#print完全被忽略
由于請(qǐng)求將#后的字符完全忽略灵奖，但是可以將#轉(zhuǎn)義為%23
例如：http://www.example.com/index.html?color=#fff 改為 http://www.example.com/index.html?color=%23fff
GET index.html?color
GET index.html?color=#fff //轉(zhuǎn)義后
Host: www.example.com
3. 修改#后面的url不會(huì)觸發(fā)網(wǎng)頁(yè)加載
比如：http://www.example.com/index.html#location1 改為 http://www.example.com/index.html#lcoation2
瀏覽器不會(huì)發(fā)起任何請(qǐng)求。
4. 但是改變#會(huì)改變?yōu)g覽器的訪問(wèn)歷史
每改變一次#后面的估盘，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄瓷患，使用倒退按鈕可以返回，前進(jìn)等遣妥。這對(duì)于Ajax應(yīng)用程序特別有用擅编，
用不同的#值，代表不同的訪問(wèn)狀態(tài)箫踩，對(duì)ie6/7沒用爱态，他們不會(huì)應(yīng)為#后的變化而增加歷史記錄。
5. window.location.hash讀取#值
window.location.hash 的值可讀可寫境钟，讀取來(lái)判斷狀態(tài)是否改變锦担，寫入時(shí)可以在不重載網(wǎng)頁(yè)的前提下，添加一條歷史訪問(wèn)記錄慨削。
6. onhashchange事件
onhashchange是一個(gè)HTML5新增的事件吆豹，hash變化時(shí)就會(huì)觸發(fā)這個(gè)事件
三種事件監(jiān)聽方式：
window.onhashchange = foo
<div onhashchange="foo()">
window.addEventlistener('hashchange',foo,false)
不支持該事件的瀏覽器可以用setInterval監(jiān)控location.hash的變化
7. google抓取#的機(jī)制
默認(rèn)情況下google爬蟲會(huì)忽略URL的#部分，但是如果你希望理盆，Ajax生成的內(nèi)容可以被爬蟲讀取痘煤，name可以使用#!
google會(huì)自動(dòng)將后面的內(nèi)容轉(zhuǎn)化成查詢字符串_escaped_fragment_的值，即#!被?_escaped_fragment_=替換
http://twitter.com/#!/username //轉(zhuǎn)化為
http://twitter.com/?_escaped_fragment_=/username
總結(jié)
對(duì)URL中的# （Hash）對(duì)照阮一峰老師的博客 做了個(gè)簡(jiǎn)單總結(jié)猿规，后期要對(duì)history等關(guān)鍵知識(shí)進(jìn)行一下總結(jié)衷快，先插個(gè)旗。
