vue中路由的兩種模式以及實作原理

Vue.js 是一種流行的前端框架，透過其優秀的路由管理模組實現了單頁應用程式（Single-page Application,SPA）的開發。 Vue 路由管理模組（Vue Router）有兩種模式：歷史模式（History mode）和雜湊模式（Hash mode）。在本文中，我們將詳細介紹這兩種模式的實作原理，以及如何在 Vue 中使用它們。

一、路由模式的概念

在傳統的多頁應用程式開發中，每個頁面都有自己的 URL 位址，使用者造訪不同的 URL 位址會要求不同的頁面。而在單頁應用程式中，所有的頁面都在同一個 HTML 頁面中展示，使用者的跳轉不會導致頁面的重新加載，而是透過 JavaScript 進行頁面的切換。在頁面切換的過程中，Vue 路由管理模組就發揮了重要的作用。

路由模式是指 URL 位址在傳輸過程中所採用的方法。根據它的不同，我們可以將路由模式分為兩種：雜湊路由（Hash-based Routing）模式和歷史路由（History-based Routing）模式。

二、雜湊模式

雜湊模式是 Vue Router 預設的路由模式，它的實作原理非常簡單。哈希指的是 URL 中的#號，也就是我們經常看到的錨點。

在雜湊模式下，URL 中的#號後面是頁面的路徑，例如http://www.example.com/#/home, 其中/#/home 就是頁面的路徑。當使用者在頁面中進行跳躍時，Vue Router 會將新頁面的路徑透過改變雜湊部分的方式展示在URL 中，從而實現頁面的切換，不會觸發頁面的重新加載，而是透過路由的切換呈現新的頁面。

使用雜湊模式的好處是能夠避免 URL 重複，因為雜湊部分不會被傳送到伺服器上，只是在前端進行頁面切換。但是，這也帶來了一些副作用，例如在搜尋引擎中會影響 SEO、導致 URL 不規範等問題。

三、歷史模式

歷史模式使用 HTML5 中的 API，其中使用了window.history.pushState API、window.history.replaceState API 和 popstate 事件。在這種模式下，Vue Router 會將目前頁面的 URL 加入到歷史記錄堆疊中，並透過操作該堆疊來實現路由的切換。當使用者點擊瀏覽器的後退按鈕時，Vue Router 又透過事件監聽機制監聽到 popstate 事件，然後回退到上一個 URL 位址。如下是範例程式碼：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

這裡需要注意的是，如果你選擇使用歷史模式，則需要合理地設定伺服器配置。因為在這種模式下，當存取的 URL 不是伺服器上靜態資源的路徑時，會傳回 404 錯誤。

四、路由模式的切換

在使用Vue Router 進行單頁應用的開發時，我們可以透過以下兩種方法切換路由模式：

#1、在路由模組中設定mode 屬性，範例程式碼如下：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2、透過在專案建置時設定vue.config.js 檔案中的historyApiFallback 屬性實作。如下是範例程式碼：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

這裡要注意的是，在設定路由模式時，需要在伺服器環境下進行測試驗證，以確保路由功能能夠正常運作。

五、總結

Vue Router 是 Vue.js 的一個重要組成部分，能夠實現單頁應用的前端路由管理。根據 URL 位址在傳輸過程中所採用的方式分為雜湊模式和歷史模式兩種，它們各有優缺點，開發者需要根據實際需求進行選擇。使用 Vue Router 進行單頁應用程式開發時，需要合理地設定路由模式，並在伺服器環境下測試驗證，確保路由功能正常運作。

以上是vue中路由的兩種模式以及實作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！