文章目錄

• • 兩種模式
  • 特點
  • 總結

兩種模式

前端路由的核心，就在于 —— 改變視圖的同時不會向后端發出請求。

• hash模式是通過改變錨點(#)來更新頁面URL，并不會觸發頁面重新加載，我們可以通過window.onhashchange監聽到hash的改變，從而處理路由。
• history模式是通過調用window.history對象上的一系列方法來實現頁面的無刷新跳轉。

特點

hash
hash，原本用來結合錨點控制頁面視窗的位置，具有以下特點：

• 可以改變URL，但不會觸發頁面重新加載（hash的改變會記錄在window.hisotry中）因此并不算是一次http請求，所以這種模式不利于SEO優化
• 只能修改#后面的部分，因此只能跳轉與當前URL同文檔的URL
• 只能通過字符串改變URL
• 通過window.onhashchange監聽hash的改變，借此實現無刷新跳轉的功能。

history
根據 Mozilla Develop Network 的介紹，調用 history.pushState()相比于直接修改 hash，存在以下優勢

• 新的URL可以是與當前URL同源的任意 URL，也可以與當前URL一樣，但是這樣會把重復的一次操作記錄到棧中
• 通過參數stateObject可以添加任意類型的數據到記錄中
• 可額外設置title屬性供后續使用
• 通過pushState、replaceState實現無刷新跳轉的功能。

存在問題
當應用通過vue-router跳轉到某個頁面后，因為此時是前端路由控制頁面跳轉，雖然url改變，但是頁面只是內容改變，并沒有重新請求，所以這套流程沒有任何問題。但是，如果在當前的頁面刷新一下，此時會重新發起請求，如果nginx沒有匹配到當前url，就會出現404的頁面。那為什么hash模式不會出現這個問題呢?因為hash雖然可以改變URL，但不會被包括在HTTP請求中。它被用來指導瀏覽器動作，并不影響服務器端，因此，改變hash并沒有改變url，所以頁面路徑還是之前的路徑，nginx不會攔截。
因此，切記在使用history模式時，需要服務端允許地址可訪問，否則就會出現404的尷尬場景。

總結

• 在hash模式下，所有的頁面跳轉都是客戶端進行操作，因此對于頁面攔截更加靈活；但每次url的改變不屬于一次http請求，所以不利于SEO優化。
• 在history模式下，借助history.pushState實現頁面的無刷新跳轉；這種方式URL的改變屬于http請求，因此會重新請求服務器，這也使得我們必須在服務端配置好地址，否則服務端會返回404，為確保不出問題，最好在項目中配置404頁面。

總結

以上是生活随笔為你收集整理的vue router 的两种路由模式hash与history的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。