vue-router 2.0 改变的内容总结一下

最近在学习个过程中遇到了不少坑点，整理一下摆出来让大家注意一下吧：

2.x 版本的 

vue-router

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

一、通用 API 的修改

1、The old 

router.go()

 is now 

router.push()

 

2、新的 

router.go

 类似 

window.history.go()

 :
接受一个数值作为参数在历史栈中导航

3、新增的方法

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

 指定的位置。

七、其他一些变化

1.目前的项目几乎每个页面都用到了1.0的ready钩子函数，然而2.0已废弃不用，进而使用mounted替换，同时还新增了beforeMount、beforeUpdate、updated等，私以为越来越向react看齐了有木有。。

beforeUpdate的作用是在页面初始渲染视图之后，一旦监测到data发生变化，在变化的数据重新渲染视图之前会触发beforeUpdated钩子函数，这也是重新渲染之前最后修改数据的机会

update的作用则是在data发生变化渲染更新视图之后触发。

2.同时废弃的还有events、$dispatch、$broadcast，官方推荐使用vuex或者全局的事件驱动，然而废弃的这些方法在vux UI框架中很多地方都有使用，无疑在项目中用到它的地方在2.0版本都会不起作用，甚至会报错。

3.v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记，然后通过this.$refs获取

例如<p ref="a"></p>   获取方法为this.$refs.a 对于自定义组件同样适用

4.$els 是用来获取元素DOM对象，这个也废弃不用，$refs可以起到替代性作用。

5.v-for循环中常用的$index、$key也已不支持使用，trackby被key属性替换。

6.自定义组件中的partial，弃用，这个一直没用到

7.新增 v-once指令

8.新增 propsData

9.新增 render
10.过度效果的处理改变 http://cn.vuejs.org/v2/guide/transitions.html

算了不胡闹了，还是把官方的说明贴出来吧 http://cn.vuejs.org/v2/guide/migration.html#模板