31.Vue 路由钩子

1.导航守卫

有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。 为此有很多种方法可以植入路由的导航过程：全局的，单个路由独享的，或者组件级的

1.1全局路由钩子

vue-router全局有三个路由钩子;

• router.beforeEach 全局前置守卫 进入路由之前
• router.beforeResolve 全局解析守卫（Vue 2.5.0+）在 beforeRouteEnter 调用之后调用
• router.afterEach 全局后置钩子 进入路由之后

具体使用

beforeEach（判断是否登录了，没登录就跳转到登录页）

router.beforeEach((to, from, next) => {  
    let ifInfo = Vue.prototype.$common.getSession('userData');  // 判断是否登录的存储信息
    if (!ifInfo) { 
        // sessionStorage里没有储存user信息    
        if (to.path == '/') { 
            //如果是登录页面路径，就直接next()      
            next();    
        } else { 
            //不然就跳转到登录      
            Message.warning("请重新登录！");     
            window.location.href = Vue.prototype.$loginUrl;    
        }  
    } else {    
        return next();  
    }
})

afterEach（跳转之后，滚动条回滚到顶部）

router.afterEach((to, from) => {  
    // 跳转之后滚动条回到顶部  
    window.scrollTo(0,0);
});

1.2单个路由独享钩子

        beforeEnter 如果不想全局配置守卫的话，可以为某些路由单独配置守卫，有三个参数∶ to、from、next

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]

1.3组件内钩子

beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave 

这三个钩子都有三个参数∶to、from、next

• beforeRouteEnter∶ 进入组件前触发
• beforeRouteUpdate∶ 当前地址改变并且改组件被复用时触发，举例来说，带有动态参数的路径foo/∶id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的foa组件，这个钩子在这种情况下就会被调用
• beforeRouteLeave∶ 离开组件被调用

注意点，beforeRouteEnter组件内还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next来访问，例如：

beforeRouteEnter(to, from, next) {      
    next(target => {        
        if (from.path == '/classProcess') {          
            target.isFromProcess = true        
        }      
    })    
}

2.触发钩子函数的完整流程

路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件∶

• beforeRouteLeave：路由组件的组件离开路由前钩子，可取消路由离开。
• beforeEach：路由全局前置守卫，可用于登录验证、全局路由loading等。
• beforeEnter：路由独享守卫
• beforeRouteEnter：路由组件的组件进入路由前钩子。
• beforeResolve：路由全局解析守卫
• afterEach：路由全局后置钩子
• beforeCreate：组件生命周期，不能访问tAis。
• created：组件生命周期，可以访问tAis，不能访问dom。
• beforeMount：组件生命周期
• deactivated：离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
• mounted：访问/操作dom。
• activated：进入缓存组件，进入a的嵌套子组件（如果有的话）。
• 执行beforeRouteEnter回调函数next。