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()
            }
          }
        })
    原文作者:米花儿团儿
    原文地址: https://segmentfault.com/a/1190000004974122
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞