var Home = Vue.extend({ template: '#home', data: function() { return { msg: 'Hello, vue router!', currentPath: '' } }, route: { data: function(transition){ transition.next({ currentPath: transition.to.path }) } } })
该示例运行效果如下：
钩子函数(06)
路由的切换过程，本质上是执行一系列路由钩子函数，钩子函数总体上分为两大类：
全局的钩子函数
组件的钩子函数
全局的钩子函数定义在全局的路由对象中，组件的钩子函数则定义在组件的route选项中。
全局钩子函数
全局钩子函数有2个：
beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时被调用
组件的钩子函数
组件的钩子函数一共6个：
data：可以设置组件的data
activate：激活组件
deactivate：禁用组件
canActivate：组件是否可以被激活
canDeactivate：组件是否可以被禁用
canReuse：组件是否可以被重用
切换对象
每个切换钩子函数都会接受一个 transition 对象作为参数。这个切换对象包含以下函数和方法：
transition.to
表示将要切换到的路径的路由对象。
transition.from
代表当前路径的路由对象。
transition.next()
调用此函数处理切换过程的下一步。
transition.abort([reason])
调用此函数来终止或者拒绝此次切换。
transition.redirect(path)
取消当前切换并重定向到另一个路由。
钩子函数的执行顺序
全局钩子函数和组件钩子函数加起来一共8个，为了熟练vue router的使用，有必要了解这些钩子函数的执行顺序。
为了直观地了解这些钩子函数的执行顺序，在画面上追加一个Vue实例：
var well = new Vue({ el: '.well', data: { msg: '', color: '#ff0000' }, methods: { setColor: function(){ this.color = '#' + parseInt(Math.random()*256).toString(16) + parseInt(Math.random()*256).toString(16) + parseInt(Math.random()*256).toString(16) }, setColoredMessage: function(msg){ this.msg += '<p>' + msg + '</p>' }, setTitle: function(title){ this.msg = '<h2>' + title + '</h2>' } } })
well实例的HTML：
<div> {{{ msg }}} </div>
然后，添加一个RouteHelper函数，用于记录各个钩子函数的执行日志：
function RouteHelper(name) { var route = { canReuse: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse') return true }, canActivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate') transition.next() }, activate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:activate') transition.next() }, canDeactivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate') transition.next() }, deactivate: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate') transition.next() }, data: function(transition) { well.setColoredMessage('执行组件' + name + '的钩子函数:data') transition.next() } } return route; }
最后，将这些钩子函数应用于各个组件：
var Home = Vue.extend({ template: '#home', data: function() { return { msg: 'Hello, vue router!', path: '' } }, route: RouteHelper('Home') }) var News = Vue.extend({ template: '#news', route: RouteHelper('News') }) var Message = Vue.extend({ template: '#message', route: RouteHelper('Message') }) var About = Vue.extend({ template: '#about', route: RouteHelper('About') })
我们按照以下步骤做个小实验：
1.运行应用（访问/home路径）
2.访问/home/news路径
3.访问/home/message路径
4.访问/about路径
切换控制流水线
当用户点击了/home/news链接，然后再点击/home/message链接后，vue-router做了什么事情呢？它执行了一个切换管道
如何做到这些呢？这个过程包含一些我们必须要做的工作：
1.可以重用组件Home，因为重新渲染后，组件Home依然保持不变。
2.需要停用并移除组件News。
3.启用并激活组件Message。
4.在执行步骤2和3之前，需要确保切换效果有效——也就是说，为保证切换中涉及的所有组件都能按照期望的那样被停用/激活。
切换的各个阶段
我们可以把路由的切换分为三个阶段：可重用阶段，验证阶段和激活阶段。
我们以home/news切换到home/message为例来描述各个阶段。（以下文字描述参考：）
1. 可重用阶段