Vue-router中hash與history的區別

Vue爲了構建 SPA, 須要引入前端路由系統Vue-Router。前端路由的核心，就在於 —— 改變視圖的同時不會向後端發出請求。

爲了達到這一目的，利用瀏覽器的特性, Vue-Router提供瞭如下兩種路由模式：

• hash —— 即地址欄 URL 中的 # 符號

好比這個 URL：http://www.test.com/#/hello，hash 的值爲 #/hello。它的特色在於：hash 雖然出如今 URL 中，但不會被包括在 HTTP 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。

• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會當即向後端發送請求。

hash與history的明顯區別

	hash	history
url顯示	有#，很Low	無#，好看
回車刷新	能夠加載到hash值對應頁面	通常就是404掉了
支持版本	支持低版本瀏覽器和IE瀏覽器	HTML5新推出的API

爲了解決history模式下刷新出現的404問題, 後臺須要作一些路由支持, 好比當url不匹配時跳轉到index.html.  

若是Vue後臺部署使用的是Nginx, 能夠這樣配置

location / {
   try_files $uri $uri/ /index.html;#支持history模式刷新
   root   /www/test/hello/;
   index   index.html;
}