vue路由模式有哪些

vue路由模式有：1、hash模式，使用URL的hash值來作為路由，支援所有瀏覽器；其url路徑會出現「#」字元。2、history模式，依賴於HTML5 API（舊瀏覽器不支援）和HTTP伺服器端設定，沒有後臺設定的話，頁面重新整理時會出現404。3、abstract模式，適用於所有JavaScript環境，如果沒有瀏覽器API，路由器將自動被強制進入此模式。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

路由模式解析

這裡要講vue-router的路由模式，首先要了解的一點就是路由是由多個URL組成的，使用不同的URL可以相應的導航到不同的位置。如果有進行過伺服器開發或者對http協定有所瞭解就會知道，瀏覽器中對頁面的存取是無狀態的，所以我們在切換不同的頁面時都會重新進行請求。而實際使用vue和vue-router開發就會明白，在切換頁面時是沒有重新進行請求也沒有重新重新整理頁面，使用起來就好像頁面是有狀態的，這是什麼原因呢。這其實是藉助了瀏覽器的History API來實現的，這樣可以使得頁面跳轉而不重新整理，頁面的狀態就被維持在瀏覽器中了。

一、hash模式

使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入，其顯示的網路路徑中會有 「#」 號，有一點點醜。這是最安全的模式，因為他相容所有的瀏覽器和伺服器。

1-特點：hash模式的url地址上有'#'

 <a href='#/aaa'>1(#/aaa)</a>

其中#/aaa就是我們的hash值,並且hash值並不會傳給伺服器

2-實現的原理：

原生的hashChange事件，主要是通過事件監聽hash值得變化 window.onHashChange=function(){}

3-重新整理頁面：

不會不發生請求，頁面不會有任何問題，不需要後端配合

而且hash模式的相容性比較好.不過他因為帶有'#'所以他的美觀行沒有history 模式好。

二、history模式

美化後的hash模式，會去掉路徑中的 「#」。依賴於Html5 的history，pushState API，所以要擔心IE9以及一下的版本，感覺不用擔心。並且還包括back、forward、go三個方法，對應瀏覽器的前進，後退，跳轉操作。就是瀏覽器左上角的前進、後退等按鈕進行的操作。

history.go(-2);//後退兩次
history.go(2);//前進兩次
history.back(); //後退
hsitory.forward(); //前進

但是history也是有缺點的，不怕前進後退跳轉，就怕重新整理（如果後端沒有準備的話），因為重新整理是實實在在地去請求伺服器了。【學習視訊分享：、】

總結一下

1：hash模式（vue-router預設模式URL後面帶#）使用URL的hash值來作為路由，支援所有瀏覽器；缺點：只能改變#後面的來實現路由跳轉。
2：history模式（通過mode: 'history’來改變為history模式）HTML5 （BOM）History API 和伺服器設定 缺點：怕重新整理如果後端沒有處理這個情況的時候前端重新整理就是實實在在的請求伺服器這樣消耗的時間很多還很慢。

三、abstract模式

abstract 是vue路由中的第三種模式，本身是用來在不支援瀏覽器API的環境中，充當fallback，而不論是hash還是history模式都會對瀏覽器上的url產生作用，他一般要實現的功能就是在已存在的路由頁面中內嵌其他的路由頁面，而保持在瀏覽器當中依舊顯示當前頁面的路由path，這就是abstract這種與瀏覽器分離的路由模式。

適用於所有JavaScript環境，例如伺服器端使用Node.js。如果沒有瀏覽器API，路由器將自動被強制進入此模式。

然後在

const router = new VueRouter({routes, mode:'hash|history|abstract',})

這裡進行切換。

（學習視訊分享：、）

以上就是vue路由模式有哪些的詳細內容，更多請關注TW511.COM其它相關文章！