在了解路由模式前，我們先看下 什麼是單頁面應用，vue-router 的實現原理是怎樣的，這樣更容易理解路由。
單頁面應用（spa）的核心之一是：更新檢視而不重新請求頁面。
vue-router 在實現單頁面路由時，提供了兩種方式：hash 模式和 history 模式；vue2是 根據 mode 引數來決定採用哪種方式，預設是 hash 模式，手動設定為 history 模式。更新檢視但不重新請求頁面」是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實現主要有以下兩種方式
簡述路由的 hash 模式是利用了 window可以監聽onhashchange 事件來實現的，也就是說 hash 值是用來指導瀏覽器動作的，對伺服器沒有影響，http 請求中也不會包括 hash 值，同時每一次改變 hash 值，都會在瀏覽器的訪問歷史中增加乙個記錄，使用「後退」按鈕，就可以回到上乙個位置。所以，hash模式 是根據 hash 值 來發生改變，根據不同的值，渲染指定dom位置的不同資料。
參考：vue 前端路由工作原理,hash與history之間的區別
特點參考：在spa專案的路由中，注意hash與history的區別
簡述參考：深入了解前端路由 hash 與 history 差異
特點參考：在spa專案的路由中，注意hash與history的區別、前端框架路由實現的hash和history兩種模式的區別
生產環境存在問題
因為 history 模式的時候路徑會隨著 http 請求傳送給伺服器，專案打包部署時，需要後端配置 nginx，當應用通過 vue-router 跳轉到某個頁面後，因為此時是前端路由控制頁面跳轉，雖然url改變，但是頁面只是內容改變，並沒有重新請求，所以這套流程沒有任何問題。但是，如果在當前的頁面重新整理一下，此時會重新發起請求，如果 nginx 沒有匹配到當前url，就會出現404的頁面。
那為什麼hash模式不會出現這個問題呢?
上文已講，hash 雖然可以改變url，但不會被包括在 http 請求中。它被用來指導瀏覽器動作，並不影響伺服器端，因此，改變 hash 並沒有改變url，所以頁面路徑還是之前的路徑，nginx 不會攔截。
因此，切記在使用 history 模式時，需要服務端允許位址可訪問，否則就會出現404的尷尬場景。
那為什麼開發環境時就不會出現404呢？
因為在vue-cli中webpack幫我們做了處理
解決問題
生產環境 重新整理 404 的解決辦法可以在nginx做****，在 nginx 中配置按順序檢查引數中的資源是否存在，如果都沒有找到，讓 nginx 內部重定向到專案首頁。
參考：vue 了解前端路由 hash 與 history 差異
hash路由和history路由
hash模式 url後面的有乙個 後面的字串，叫hash值，也叫錨點。1 hash 值變化不會導致瀏覽器向伺服器發出請求 2 hash 改變會觸發 hashchange 事件 當hash值變化了，就會觸發事件 3 在 html5 的 history 出現前，基本都是使用 hash 來實現前端路由的 ...
關於hash路由和history路由
1.參考文件 hash模式?history模式 window.location.hash和search掐架 2.問題 3.關於兩種路由的組成 hash模式 簡單總結 除去伺服器需要使用的，能使用的僅剩下了hash,hash改變不會重新整理頁面,hash值改變會增加歷史記錄 就是會有頁面的前進後退 號...
路由的hash和history模式
為了構建 spa 單頁面應用 需要引入前端路由系統，這也就是 vue router 存在的意義。前端路由的核心，就在於 改變檢視的同時不會向後端發出請求。為了達到這種目的，瀏覽器當前提供了以下兩種支援 history 利用了 html5 history inte ce 中新增的 pushstate ...