vue-router 2.0 改變的內容

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指定的位置。