转载

vue-router 2.0 改变的内容

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

通用 API 的修改

The old router.go() is now 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.