vue-router控制切换流水线 - 快车库

任何一个钩子函数都可以终止界面切换；-------界面切换：组件更换；数据更新；
每个切换钩子函数都会接受一个 transition 对象作为参数

切换对象（transition）：


**对象属性**：
    //表示要切换的路径（目标路径）的路由对象；
    transition.to
    //表示当前路径的路由对象；
    transition.from
    
**对象方法**：              
    //调用此函数处理切换过程的下一步；（是因为任何一个钩子函数都可以终止界面切换么？？）
    transition.next()
    //调用此函数来终止或者拒绝此次切换
    transition.abort([reason])
    //取消当前切换并重定向到另一个路由
    transition.redirect(path)

全局的前置钩子函数：

router.beforeEach(function(transition){
    
})

//在路由切换开始时调用；
//调用发生在整个切换流水线之前；
//如果此钩子函数拒绝了切换，整个切换流水线根本就不会启动；
//可以注册多个全局的前置钩子函数，同步顺序被调用；

全局的后置钩子函数：

router.afterEach(function(transition){
    //只能访问transition.on和transition.from属性
})

//在每次路由验证成功进入激活阶段时被调用；
//调用时仅仅意味着切换已经被验证过了（canDeactivate和canActivate都成功的被断定resolved），而且浏览器地址栏的地址已经更新；
//不能保证所有的active钩子函数都被断定了；
//可以注册多个全局的后置钩子函数，同步顺序被调用；

//切换流水线：

1.检查当前的视图结构中是否存在可重用的组件：
    
    通过对比两个新的组件树，找出共用的组件，然后检查它们的可重用性；
    
    组件A.canReuse?
    
2.验证阶段：

    检查当前的组件是否能够被停用以及新组件是否可以被激活：
    
    组件B.canDeactivate?  -------按照从下至上的冒泡顺序检查，先判断子组件是否可以被停用；
    组件C.canActivate?  ---------按照从上至下的传播顺序检查，先判断父组件是否可以被激活；
    
    如果在验证阶段终止了界面切换，路由器会保持当前的应用状态，恢复到前一个路径；
    
3.激活阶段：
    
    上一阶段验证成功完成（都被调用且没有被终止），路由器则开始禁用当前组件并启用新组件；
    禁用当前组件的顺序从下至上；
    启用新组件的顺序从上至下；
    
    组件B.deactivate
    组件C.activate --> C.data
    
    界面的更新（数据的更新）会等到所有受影响的组件deactivate 和 activate钩子函数执行之后才进行；
    
4.钩子函数的使用：

    在构建组件的 route 选项中实现这些函数：

        Vue.component('hook-example', {
          // ... other options
          route: {
            activate: function (transition) {
                //接受transition对象作为参数；
                transition.to;
                transition.from;
                transition.next();
                transition.abort([reason]);
                transition.redirect(path);
            },
            deactivate: function (transition) {
              console.log('hook-example deactivated!')
              transition.next()
            }
          }
        })