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

Vue前端路由hash與history間有何不同？以下這篇文章就來了解一下前端路由 hash 與 history 的差異，希望對大家有幫助！

沒了解這兩種路由前，不管是vue還是react 在專案建​​立時難免會進行路由之間選擇,在hash 和history 難免會糾結一番,或者是直接稀里糊塗用了預設帶# 的hash路由，看完這篇分享,保準讓你之後不會在為選擇哪中路由犯難,實現按需選擇。有疑問歡迎在留言區指出，大家一起溝通。

簡單介紹Vue Router

• #Vue Router 是Vue.js 官方的路由插件，它和Vue.js 是深度整合的，適合用於建立單頁面應用程式。 vue的單一頁面應用程式是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對應起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在 vue-router 單一頁面應用程式中，則是路徑之間的切換，也就是元件的切換。 路由模組的本質 就是建立起url和頁面之間的映射關係。 （學習影片分享：vue影片教學）
• 至於為什麼我們不能用a標籤，這是因為用Vue做的都是單頁應用，就相當於只有一個主的index.html 頁面，所以你寫的 標籤是不起作用的，你必須使用vue-router 來管理。

Vue Router 實作原理

• #在了解路由模式之前，我們要先清楚，vue-roter 的實作原理是怎樣的，什麼是單頁應用，特點是什麼，這樣更容易加深對路由的理解。

• SPA 單頁及應用方式:單一頁面應用程序，只有一個完整的頁面；它在第一次加載頁面時,就將唯一完整的html 頁面和所有其餘頁面元件一起下載下來，這樣它在切換頁面時，不會載入整個頁面，而是只更新某個指定的容器中內容。

• 單一頁面應用程式(SPA)的核心之一是: 更新檢視而不重新要求頁面。

• 路由器物件底層實作的三大步驟即(1)監視網址列變更；(2)找出目前路徑對應的頁面元件；(3)將找到的頁面元件取代到router-vieW 的位置。

• vue-router 在實作單一頁面前端路由時，提供了兩種方式：Hash 模式和History 模式；vue2 是根據mode 參數來決定採用哪一種方式，vue3 則是history 參數，下面我們將圍繞這個屬性進行進一步了解。

  

Hash

簡述

• vue-router 預設hash 模式－ 使用URL 的hash 來模擬一個完整的URL，所以當URL 改變時，頁面不會重新載入。 hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變# 後的部分，瀏覽器只會捲動到對應位置，不會重新載入網頁，也就是說# 是用來指導瀏覽器動作的，對伺服器端完全無用，HTTP 請求中也不會不包含# ，同時每一次改變# 後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用"後退" 按鈕，就可以回到上一個位置，所以說hash 模式透過錨點值的改變，根據不同的值，渲染指定DOM 位置的不同資料。

• # 符號本身以及它後面的字元稱為hash，可透過 window.location.hash屬性讀取。

特點

• hash 雖然出現在URL中，但不會被包含在HTTP 請求中。它是用來指導瀏覽器動作的，對伺服器端完全無用，因此，改變hash 不會重新載入頁面
• 可以為hash 的改變新增監聽事件：

•    window.addEventListener("hashchange", fncEvent, false)

• 每次改變hash（window.location.hash），都會在瀏覽器的存取歷史中增加一個記錄
• # url 帶一個# 號。

設定

• vue3 設定 hash 模式路由

  

##history

簡述

• history是路由的另一種模式，由於hash 模式會在url 中帶#，如果不要帶#的話，我們可以使用路由的history 模式，只需要在回應的router 設定規則時,加上即可，vue 的路由預設是hash 模式。
利用了
• HTML5 History Interface新增的 pushState() 和 replaceState() 方法。
這兩個方法應用於瀏覽器的歷史記錄棧，在目前已有的
• back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向後端發送請求。

設定

#特點

路由跳轉不需要重新載入頁面。
• 不帶 # 在大部分人看來要比 hash 路由好看很多。
• 相容性沒有hash 好，會在下面展開說明

生產環境問題及解決

當我們把history專案部署到伺服器後,此時我們在瀏覽器輸入一個網址(例如是
• www.test.com ), 此時會經過dns 解析，拿到ip 位址後根據ip 位址向該伺服器發起請求,伺服器接受到請求後,然後回傳對應的結果(html,css,js)。如果我們在前端設定了重定向，此時頁面會進行跳到  www.test.com/home ,在前端會進行匹配對應的元件然後將其渲染到頁面上。此時如果我們刷新頁面的話，瀏覽器會發送新的請求 www.test.com/home, 如果後端伺服器沒有 /home 對應的接口，那麼就會返回404。

  

生產環境刷新404 的解決方案可以在
• nginx 做代理轉發，在nginx 中配置按順序檢查參數中的資源是否存在，如果都沒有找到，讓nginx 內部重定向到專案首頁。

  

開發環境- historyApiFallback

• 有些小夥伴會有疑問,為什麼開發環境沒有遇到這個問題呢，不是跟生產同樣的刷新操作嘛。

  

• 這裡我也是疑問了一下，經過查閱相關資料後發現在

  vue-cli 中webpack 幫我們做了處理

  

• 如果我們把該配置改位false,瀏覽器會把我們這個當做是一次get 請求，如果後端沒有對應的介面,就會出現下面這個報錯提示。

  

  

#總結

• 至此我們使用知道了

  vue-roter 的兩種路由模式，及差異化，簡單來講就是，hash 路由兼容梗好，但是帶#顯得醜陋， histroy 和正常url 路徑一樣，但是需要在伺服器進行單獨設定。大家可以依照自己的喜好去按需使用。有疑問的同學歡迎在留言區溝通。

（學習影片分享：web前端開發、程式設計基礎影片）

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