為什么要有hash 和history？

對于Vue這類漸進式前端開發(fā)框架，為了構(gòu)建SPA（單頁面應用），需要引入前端路由系統(tǒng)，這也就是Vue-Router存在的意義。前端路由的核心，就在于——改變試圖的同時不會向后端發(fā)出請求。

為了達到這一目的，瀏覽器當前提供了一下兩種支持：
1：hash - 即地址欄URL中的 # 符號（此hash不是密碼學里的散列運算）
比如這個URL：http：//www.abc.com/#/hello,hash的值為#/hello.它的特點在于：hash雖然出現(xiàn)在URL中，但不會被包括在HTTP請求中，對后端完全沒有影響，因此改變hash不會重新加載頁面。
2：history - 利用了HTML5 History Interface中新增的pushState()和replaceState（）方法。（需要特定瀏覽器支持）

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

因此可以說，hash模式和histoury模式都是屬于瀏覽器自身的特性，Vue-Router只是利用了這兩個特性（通過調(diào)用瀏覽器提供的接口）來實現(xiàn)前端路由

使用場景

一般情景下，hash和histoury都可以，除非你更在意顏值，#符號夾雜在URL里看起來確實有些不太美麗。如果不想要很丑的hash，我們可以用路由的history模式，這種模式充分利用history。pushState API來完成URL跳轉(zhuǎn)二無須重新加載頁面。
調(diào)用history.pushState()相比于直接修改hash ，存在以下優(yōu)勢：
1：pushState()設(shè)置的新URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，因此只能設(shè)置與當前URL同文檔的URL；
2：pushState()設(shè)置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中；而hash設(shè)置的新值必須與原來不一樣才會觸發(fā)動作將記錄添加到棧中；
3：pushState()通過stateObject參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而hash只可添加短字符串；
4：pushState()可額外設(shè)置title屬性供后續(xù)使用。

當然history也不是樣樣都好。SPA雖然在瀏覽器里游刃有余，單真要通過URL向后端發(fā)起HTTP請求時，兩者的差異就來了。尤其在用戶手動輸入URL后回車，或者刷新（重啟）瀏覽器的時候。
1：hash 模式下，僅hash符號之前的內(nèi)容會被包含在請求中，如http://www.abc.com,因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回404錯誤。
2：history模式下，前端的URL必須和實際向后端發(fā)起請求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少對/book/id 的路由處理，將返回404錯誤、

總結(jié)

以上是生活随笔為你收集整理的vue-router的两种模式（hash和history）及区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。