vue路由是什么？

Vue 路由是 Vue.js 框架提供的一種機(jī)制，用于實(shí)現(xiàn)單頁面應(yīng)用（Single-Page Application，簡稱 SPA）中的前端路由功能。它允許通過定義不同的路由路徑和對應(yīng)的組件，來管理應(yīng)用程序中不同頁面或視圖的展示和切換。

Vue 路由使用了瀏覽器的 History API 或 hash（#）來實(shí)現(xiàn)路由導(dǎo)航。通過配置路由映射關(guān)系，將 URL 的不同路徑與對應(yīng)的 Vue 組件關(guān)聯(lián)起來。當(dāng)用戶點(diǎn)擊鏈接或執(zhí)行特定操作時，Vue 路由可以動態(tài)地加載所需的組件并更新頁面內(nèi)容，而無需重新加載整個頁面。這樣，用戶可以在單頁應(yīng)用中快速、平滑地切換頁面，獲得更好的用戶體驗(yàn)。

在 Vue 路由中，可以定義多個路由，并指定每個路由對應(yīng)的路徑和組件?？梢酝ㄟ^編程式導(dǎo)航或聲明式導(dǎo)航的方式，根據(jù)具體的需求，在不同的組件之間切換路由。Vue 路由還支持參數(shù)傳遞、路由守衛(wèi)、嵌套路由等功能，以滿足復(fù)雜的應(yīng)用場景。

使用 Vue 路由，可以輕松構(gòu)建交互豐富、界面流暢的單頁面應(yīng)用，有效管理頁面之間的導(dǎo)航和狀態(tài)切換。

Vue的路由有兩種模式：Hash 模式和 History 模式。

Hash 模式

在這種模式下，URL 中的路由路徑會以 # 符號作為分隔符。例如，http://example.com/#/home。
Hash 模式的好處是它不會觸發(fā)頁面的刷新，所有的路由都在客戶端進(jìn)行處理，并且兼容性較好，可以在不同的瀏覽器和服務(wù)器配置中使用。

Vue 路由的 Hash 模式是通過修改 URL 中的哈希（hash）部分來實(shí)現(xiàn)的。在 Hash 模式下，URL 中的路由路徑會以 # 符號作為分隔符。例如，http://example.com/#/home。

當(dāng)用戶切換路由時，Vue 路由會監(jiān)聽 URL 的 hashchange 事件，一旦 URL 的哈希部分發(fā)生變化，它就會根據(jù)新的哈希值找到對應(yīng)的路由配置，并動態(tài)地加載所需的組件并更新頁面內(nèi)容，形成頁面無刷新的效果。

所以，在使用 Hash 模式時，每次切換路由都會修改 URL 的哈希部分，而不會改變實(shí)際的 URL 路徑，因此刷新頁面或直接訪問某個子路由時，需要保證服務(wù)器能正確響應(yīng)前端路由請求，返回正確的頁面內(nèi)容。

Hash具體的原理如下：

1. Vue 路由會創(chuàng)建一個全局的監(jiān)聽器，監(jiān)聽瀏覽器的 hashchange 事件。
2. 當(dāng)用戶點(diǎn)擊鏈接或執(zhí)行特定操作時，Vue 路由會將對應(yīng)的路由路徑解析出來，并將該路徑的哈希部分設(shè)置為當(dāng)前 URL 的哈希部分。例如，點(diǎn)擊了一個鏈接，將路由路徑 ‘/home’ 解析出來，然后將 ‘home’ 設(shè)置為 URL 的哈希部分，即 http://example.com/#/home。
3. 瀏覽器會自動觸發(fā) hashchange 事件，Vue 路由監(jiān)聽到事件后，根據(jù)新的哈希值找到對應(yīng)的路由配置，并根據(jù)配置信息動態(tài)加載對應(yīng)的組件，更新頁面內(nèi)容，完成路由導(dǎo)航的過程。

Hash 模式的好處

• 不會觸發(fā)頁面的刷新
• 所有的路由都在客戶端進(jìn)行處理
• 并且兼容性較好
• 可以在不同的瀏覽器和服務(wù)器配置中使用

缺點(diǎn)

但同時，URL 中的 # 符號可能對SEO不太友好，并且在 URL 中出現(xiàn)了冗余信息。

History 模式

在這種模式下，URL 中的路由路徑?jīng)]有 # 符號，看起來更加美觀。例如http://example.com/home。
History 模式依賴 HTML5 的 History API，它通過修改瀏覽器的歷史記錄來實(shí)現(xiàn)前端路由的切換。與 Hash 模式相比，History 模式的 URL 更加友好，但需要服務(wù)器配置支持，確保在每個路由都返回正確的頁面，即使在刷新頁面或直接訪問某個子路由時也能正常工作。

在 Vue 中，默認(rèn)采用的是 Hash 模式，你可以通過配置 mode: ‘history’ 來啟用 History 模式，同時需要在服務(wù)器端進(jìn)行相應(yīng)的配置，以確保在各種情況下都能正確響應(yīng)前端路由請求。

總結(jié)一下，Hash 模式使用 # 符號，不會觸發(fā)頁面刷新，兼容性較好；History 模式去除了 # 符號，需要服務(wù)器配置支持，URL 更加友好。

實(shí)現(xiàn) History 模式的原理如下：

1. 當(dāng)用戶訪問一個 Vue 路由應(yīng)用時，服務(wù)器需要配置一個默認(rèn)頁面（比如 index.html），用于處理與前端路由相關(guān)的請求。
2. 當(dāng)用戶切換路由時，Vue 路由會調(diào)用瀏覽器的 History API，通過 pushState 或 replaceState 方法修改當(dāng)前的歷史記錄，并將新的路徑添加到瀏覽器的歷史棧中。
3. Vue 路由還會監(jiān)聽 popstate 事件，當(dāng)用戶點(diǎn)擊瀏覽器的前進(jìn)或后退按鈕時，會觸發(fā)該事件，Vue 路由會根據(jù)新的路徑找到對應(yīng)的路由配置，并動態(tài)地加載所需的組件并更新頁面內(nèi)容，完成路由導(dǎo)航的過程。

在 History 模式下，服務(wù)器需要正確配置，確保在直接訪問某個子路由時返回應(yīng)用的默認(rèn)頁面（比如 index.html），這樣前端路由才能接管路由請求并正確展示對應(yīng)的頁面內(nèi)容。

History 模式的好處

History 模式相比于 Hash 模式更加符合傳統(tǒng)的 URL 形式，沒有冗余的 # 符號，對搜索引擎更友好。

缺點(diǎn)

但需要注意的是，在使用 History 模式時，服務(wù)器需要正確配置以處理前端路由請求，并且要注意兼容性，因?yàn)橐恍┡f版本的瀏覽器可能不支持 History API。如果在不支持的情況下，Vue 路由會自動降級到 Hash 模式來保證路由功能的正常運(yùn)行。文章來源地址http://www.zghlxwxcb.cn/news/detail-692857.html

到了這里，關(guān)于vue路由的兩種模式 hash與history的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！