videojs vue 動态source_深入探索 Vue 路由

能夠建構出色的單頁應用程式(SPA)是 Vue.js 最具有吸引力的功能之一。

SPA 非常好，因為它們不需要在每次更改路由時都去加載頁面。這就意味着一旦加載了全部内容，就可以真正快速地對視圖進行切換，并提供出色的使用者體驗。

如果你想要基于 Vue 去建構 SPA，則需要 Vue 路由。

在本教程中，我将介紹設定 Vue Router 的基礎知識，并研究一些更進階的技術，例如：

動态路由比對
導航挂鈎(Navigation Hook)

Vue 路由是什麼？

Vue 路由有助于在浏覽器的 URL 或曆史記錄與 Vue 元件之間建立連結，進而允許某些路徑渲染與之關聯的任何一個視圖。

VueCore 小組成員 Eduardo San Martin Morote 在他的 VueConf Toronto演講[1]中，對 Vue 路由背後的設計思想做了大量的分享。

Morote 讨論了在靈活的路由(開發人員有更多的自主權，但是需要編寫更多的代碼)與死闆的路由(開發人員擁有的自主權較少，但是路由涵蓋了更多的應用場景)之間進行權衡時，其背後的決策過程。

基于配置的 Vue 路由旨在為開發人員提供用于常見應用場景的工具，并靈活應對獨特的問題。

在繼續介紹一些更進階的 Vue 路由之前，先了解一下基礎知識。

Vue 路由的快速設定

首先是快速建立一個 Vue Router 的簡單例子。

雖然你可以用 vue-cli 輕松添加 Vue 路由，但是我認為你應該知道該怎樣自己進行操作。這樣才能夠真正了解Vue 路由的每個細節。

首先用

npm install vue-router

把 Vue Router 添加到我們的項目中。然後通過

src/main.js

檔案将其包含在 Vue 執行個體中。

完成所有設定後，開始建立路由。

在 src 内，建立一個

src/router

檔案夾，其中的

index.js

檔案包含以下内容。

這個代碼段用了兩個路由元件比對來初始化 Vue Router。我不會在這裡介紹 Home 和 Profile 元件的詳細資訊，你隻需要假設它們分别輸出 “home” 和 “profile” 就行了。

顯示路由視圖

前面已經設定了 Vue 路由，但是還沒有檢視效果的方式。

這時就需要

元素發揮作用了。從本質上講，router-view 元素為 Vue Router 提供了一個位置，用來渲染目前 URL 被解析後對應的元件。

對于這個例子，我們将其放在

App.vue

根元件中。再添加一些連結，以便可以在兩個路由之間切換。Vue Router 使用稱為

的特殊連結元素，這些元素的

to

屬性能夠映射到元件。

運作我們的應用時，應該能夠看到 home 元件渲染。如果單擊路由連結元素，那麼内容将會被更改，同時 URL 也會更改！

下面深入了解 Vue Router 的更多細節。

以程式設計方式更改路由

在前面的示例中，我們使用

在不同的路線之間導航。從本質上講，這些等效于 Vue Router 的

标簽(實際上，它們可以編譯為

标簽)。

但是另一種更改路由的方法是用

router.push

方法以程式設計方式進行導航。與使用

類似，

router.push

接受通過使用其路徑或名稱的字元串或對象映射到一個路由。

使用此方法傳遞 URL 參數或查詢也很容易。隻需要添加一個

params

或

query

參數即可。

曆史記錄模式和哈希模式之間的差別

Vue 路由的 URL 有兩種模式：曆史記錄和哈希模式。

「哈希模式(預設)」——使用 URL 哈希來模拟 URL，例如 mypage.com/#profile
「曆史記錄」——看起來像一個典型的 URL，并使用 history.pushState 來避免頁面被重新加載；例如 mypage.com/profile

我們的路由用了曆史記錄模式，因為我個人喜歡标準 URL 外觀。

處理動态路由

你可以把 URL 模式與元件進行比對，而不必對每個可能的路徑進行寫死。這對于配置文章頁面、個人資料頁面和其他可以動态建立或删除的内容非常有用。

用冒号

在 Vue 路由中定義動态路徑。例如，如果我們要動态比對文章頁面，則路由應如下所示。

這個路由會把所有遵循

/post/:postID

模式的 URL 導航到相同的 ArticlePage.vue 元件。

如果想要在元件内部擷取 postID，有兩種方法可以實作。

我們的 postID 可以通過 $route.params 對象在 ArticlePage 中通路
我們可以把文章 ID 作為 prop 傳遞給你的元件。

我推薦使用第二種方法，因為它可以使你建構更多的不依賴于特定 URL 格式的可重用元件。

隻需在路線中添加

props:true

即可。添加該屬性後，我們的動态路由應如下所示。

在元件中，必須確定在聲明 prop 時要與在路由中聲明的名稱相同。

在更完整的項目中，我們通常會采用路由傳遞的 prop 值，并通過 API 調用來加載相應的内容。但是一旦可以通路元件内部的 prop 時，就可以使用它進行任何操作。

導航守護簡介

導航守護是 Vue Router 中更進階的内容之一。它們是路由過程中的 Hook，可讓你重定向、取消或修改導航。

導航守護有三種類型：

全局守護
特定路由的守護
在元件中的守護

此外，守護可以接受三個參數：

to ：我們要到達的那個路由
from ：要離開的路由
next ：用于解決 Hook 的函數；根據傳遞給下一個方法的參數，我們的路由将處理不同的導航
next(false) ：中止導航，不離開 from 路由
- next('/ home') ：把我們的導航重定向到指定的路由
next() ：如果沒有參數，則會簡單地将其移至下一個 Hook；确認導航沒有剩餘的Hook

1. 全局守護

全局守護的措施主要有兩種：

router.beforeEach()

與

router.afterEach()

分别在導航解析之前和之後運作。

讓我們來看一個例子。在此方法中，首先檢查使用者是否有權通路某個頁面，如果沒有通路權，将會阻止路由解析。請注意，每次 Hook 運作時僅調用一次。

2. 特定于路由的守護

當我們在 Vue Router 中聲明路由時，還可以添加一個

beforeEnter

函數，其功能類似于全局

beforeEach

路由，但是它可以包含特定于路由的邏輯。

3.在元件中的守護

更具體地說，我們可以在元件的 options 對象中插入導航守護，總共有三種：

beforeRouteEnter (to, from, next) ：在确認此路由之前調用；該元件尚未建立。
beforeRouteUpdate (to, from, next) ：在切換路由時調用；但新路由也可以确定此元件。
beforeRouteLeave(to, from, next) ：當離開這個元件時被調用

需要注意的是，在确認導航之前和實際建立元件之前，将會調用

beforeRouteEnter

。此時我們還沒有通路

this

。

為了解決這個問題，

beforeRouteEnter

允許我們将回調傳給下一個方法，該方法将在元件實際建立後立即執行。

總結

希望本文能夠幫你你學習一些基本和進階的 Vue 路由技術。

探索一個靈活但易用的路由所涉及的設計思路非常很有趣。在聽過 Morote 的演講之後，我認為後續可能還會有更多的改進！

# 作者：Matt Maribojoc