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