vue-router 2.0 改變的內容

li3p發表於2016-08-17
Vue

Beta1.官方說明
Beta2.官方說明

2.x 版本的vue-router相比之前的0.7.x版本，有很多破壞性改變：

通用 API 的修改

  • 舊的 router.go() 現在改成了 router.push().

  • 新的 router.go 類似 window.history.go(): 接受一個數值作為引數在歷史棧中導航

  • 新增的方法:

    • router.back()

    • router.forward()

路由配置

所有路由配置都通過一個單獨的物件傳到Router的建構函式。所以可用的選項，參見configuration object's type declaration。

routes 選項取代了 router.map()。此外，路由配置現在用陣列而不是用物件雜湊表來作為資料結構。這保證了一致的匹配次序（物件鍵值列舉的次序是依賴瀏覽器的實現的）。

這裡 是一個新的配置語法的例子.

以下的路由器例項配置選項被作廢了：

  • history (被 mode 取代)

  • abstract (被 mode 取代)

  • root (被 base 取代)

  • saveScrollPosition (被 scrollBehavior 取代，後者用起來更加靈活，下面會提到)

  • hashbang (因為 hashbang 在Google爬站的時候不再需要，所以移除了此選項)

  • transitionOnLoad (因為 Vue 2.0 有顯式的視覺表現過渡動畫控制，所以此選項移除)

  • suppressTransitionError (因為鉤子函式的系統的簡化而移除)

新的mode選項取值為： (預設是 "hash"):

  • "abstract"

  • "hash"

  • "history"

在不支援 history.pushState 的瀏覽器中, 路由器會自動回退為 hash 模式.

下列方法已經作廢：

  • router.map (被 routes 選項取代)

  • router.beforeEach (被 beforeEach 選項取代，不過 beta2中有修改，見下面)

  • router.afterEach (被 afterEach 選項取代，不過 beta2中有修改，見下面)

  • router.redirect (現在可以在 routes 中直接宣告, 參見 Example)

  • router.alias (現在可以在 routes 配置中直接宣告, 參見 Example)

Beta 2 中，beforeEach 和 afterEach 又被改回成為 router的例項方法。作者說是這可以讓外掛和模組更加方便的在router例項建立後增加hooks。

導航鉤子函式

鉤子系統被極大簡化，所有0.7的遷移鉤子都作廢了，下面是替代方案：

  • 使用元件自身的生命週期鉤子函式來替代activate 和 deactivate

  • 在$router 上使用 watcher 來響應路由改變 (e.g. 比如基於新的路由引數獲取資料 - Example)

  • canActivate 可以被router 的配置中的 beforeEnter 中實現 Example

  • canDeactivate 已經被 beforeRouteLeave 取代, 後者在一個元件的根級定義中指定。這個鉤子函式在呼叫時是將元件的例項作為其上下文的。Example

  • canReuse 已經被移除，因其容易混淆且很少被用到。

此外，在2.0版本中所有的鉤子函式都有相同簡潔的簽名：

guard (toRoute, redirect, next) {
  // call redirect to redirect to another route
  // call next to confirm current route
  // or do nothing to cancel the navigation
}

這些函式也不再支援返回 Promises.

連結（Links）

v-link 指令已經被 <router-link> 元件替代. 這個元件接受以下屬性引數:

  • to: 一個路徑字串, 或者一個 Location Descriptor 物件.

  • tag: 渲染為的 html 元素型別，預設是<a>.

  • exact: 用於控制當前啟用項的匹配行為（嚴格匹配或者貪婪匹配）.

  • append: 控制相對連結路徑的追加方式

  • replace: 替代而不是作為歷史條目壓榨你

  • active-class: 當連結項啟用時增加的 CSS 樣式

這裡有個 複雜的例子 展示了<router-link>的用法。

命名檢視 (Named Views)

單個路由現在可以對映到多個命名元件。這些元件將會在渲染在對應命名的多個 <router-view>中. Example
(譯者注）這個功能很贊，提供了一種新的用多個元件組成頁面結構的方法，同時又不增加元件之間的耦合。

滾動行為（Scroll Behavior）

scrollBehavior 選項接受一個函式，返回在路由導航時控制頁面如何滾動的規則。你可以程式碼控制是否要滾動的頁面頂部、書籤或者在狀態中儲存的位置。 Example

Beta2 版本中又對 scrollBehavior 做了修改:

beta.1 中返回 { hash: true } 來滾動到文件中的一個錨點，現在返回的是 { selector: route.hash }。這也同時意味著你可以返回任意的 CSS 選擇器，來匹配成要滾動到的目標。

此外，你還可以返回{ selector: '...', x: 0, y: 0 }，這會讓路由器首先嚐試滾動到匹配的元素，如果沒有找到匹配元素，那就滾動到 x和y指定的位置。

相關文章