淺析Vue中hash路由與history路由的區別

使用 Vue 或 React 等前端渲染時，通常會有 hash 路由和 history 路由兩種路由方式。那麼這兩種路由方式有什麼差別呢？下面跟大家介紹一下，希望對大家有幫助！

hash路由與history路由這兩種模式的差別，從以下幾個面向來整理一下：

一、顏值

#hash:  即網址列URL 中的#符號。例如這個 URL：http://www.abc.com/#/hello， hash 的值為 #/hello。它的特點在於：hash 雖然出現在 URL 中， 但不會被包括在 HTTP 請求中，對後端完全沒有影響，因此改變 hash 不會重新載入頁面。 【相關推薦：《vue.js教學》】

history: 網址列中沒有 #。例如這個 URL：http://www.abc.com/hello，更美觀，是個正常的url，適合推廣宣傳。

二、功能

history:  在開發app的時候有分享頁面，這個分享出去的頁面就是用vue或是react做的，咱們把這個頁面分享到第三方的app裡，有的app裡面url是不允許帶有#號的，所以要將#號去除那麼就要使用history模式，但是使用history模式還有一個問題就是，在訪問二級頁面的時候，做刷新操作，會出現404錯誤，那麼就需要和後端人配合，讓他配置一下apache或是nginx的url重定向，重定向到你的首頁路由上就好了。

三、回車刷新

• hash: 雖然出現在URL 中，但不會被包括在HTTP 請求中，對後端完全沒有影響，因此改變hash 不會重新載入頁面;

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

  這兩個方法應用於瀏覽器的歷史記錄棧，在目前已有的back()、forward()、go() 方法的基礎之上，這兩個方法提供了對歷史記錄進行修改的功能。使用這兩個方法執行修改時，只能改變目前網址列的URL，但瀏覽器不會向後端發送請求，也不會觸發popstate事件的執行，通常會出現404，這時候就需要和後端人配合，設定重定向。

四、使用場景

一般情況下，hash 和history 都可以，如果你是個顏值控，對#符號夾雜在URL 裡有些不爽。

如果不想要很醜的 hash，我們可以用路由的 history 模式，這個模式充分利用 history.pushState API 來完成URL 跳轉而無須重新載入頁面。呼叫history.pushState() 相較於直接修改hash，存在以下優勢：

1. pushState() 設定的新URL 可以是與目前URL 同源的任意URL；而hash 只可修改# 後面的部分，因此只能設定與目前URL 同文件的URL；

2. ##pushState() 設定的新URL可以與目前URL 一模一樣，這樣也會把記錄加到堆疊中；而hash 設定的新值必須與原來不一樣才會觸發動作將記錄加入堆疊中；

3. ushState() 透過stateObject 參數可以新增任意型別的資料到記錄中；而hash 只會加入短字串pushState() 可額外設定title 屬性以供後續使用。

五、總結

傳統的路由是，當使用者存取一個url時，對應的伺服器會接收這個請求，然後解析url中的路徑，從而執行對應的處理邏輯，這樣就完成了一次路由分發。

前端路由是不涉及伺服器的，是前端利用hash或HTML5的history API來實現的，一般用於不同內容的展示和切換。

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是淺析Vue中hash路由與history路由的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！