這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 簡單介紹 Vue Router Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
簡單介紹 Vue Router
Vue Router是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關係。- 至於我們為什麼不能用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 路徑一樣，但是需要在伺服器進行單獨配置。大家可以根據自己的喜好去按需使用。有疑問的同學歡迎在評論區進行溝通。
本文轉載於:
https://juejin.cn/post/7096034733649297421
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
