我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

路由守卫----路由跳转的生命周期函数

什么是生命周期函数？

生命周期函数很好理解，指的是一个流程的几个关键点，比如你坐公交车回家

第一个关键点就是上车，第二个关键点就是下车，上下车就是坐车回家的关键点，

在上车前，司机要看看你有没有买票，不买票就把让你去买票
在车上，你要看有没有到家，如果到家了，那就提起包包准备跑路
在下车后，你走路要看路，看看是不是回家的路

如此，就是坐车回家的流程，放到路由跳转上也一样，路由跳转，就分为跳转前，跳转时和跳转后，和坐车回家对应一下就是

跳转前---上车前
跳转时---在车上
跳转后---下车后

如此，你就明白路由跳转的流程了

那么，我们再来根据路由实际使用来具象化

你在上车前，司机会核验你有没有买票对吧，那你在路由跳转页面之前，也要核验你是不是合法身份，如果不合法，那就不给你跳转

每一个页面都有它的生命周期，那么每一个页面在跳转时，也都有它的路由守卫，那如果是一个大项目，几十上百个页面，去到每个页面之前，都是要校验你的身份，那你要给每个页面都写上这样相同的路由守卫代码吗，那不得累死，聪明的程序员不做如此低效率的事，此时我们应该是希望能够写一次路由守卫，然后在每个页面都生效吧，如此，便引入第一个应用实例

全局路由守卫---- 全局即是整个项目，对应的文件就是你一个vue项目中的main.js，我们可以在main.js里面写上一份路由守卫代码，如此就能全局生效了，那这代码怎么写呢，其实很简单

在main.js里引入router组件

import router from './router'

接下来，就是全局路由守卫

router.beforeEach((to,from,next)=>{     //路由跳转前，还没开始跳转
  console.log(to,from);   
  if(!sessionStorage.getItem('userName') && to.name !== 'login'){  //身份校验
    next({name:'login'})    //不成功则跳转去登录页面
  }else{
    next()                //成功则去到下一个生命周期
  }
  
})
router.beforeResolve((to,from,next)=>{  //开始跳转，但还未完成跳转
  if(!sessionStorage.getItem('userName') && to.name !== 'login'){ //也可以在这儿做身份校验
    next({name:'login'})  //不成功则跳转去登录页面
  }else{
    next()                //成功则去到下一个生命周期
  }

})
router.afterEach((to,from)=>{      //完成跳转后  aftereach没有next
  if(!sessionStorage.getItem('userName') && to.name !== 'login'){
    router.push('/login')
  }
})

router.beforeEach------在每个页面跳转前

router.beforeResolve---在每个页面跳转完成前

router.afterEach---------在每个页面跳转完成后

这三个就是页面跳转时的生命周期函数，也就是路由守卫

除afterEach外，每一个生命周期结束时，都需要写上next()，就跟koa的中间件里需要使用next()进入到下一个中间件一样，路由守卫需要写上next()，才会进入下一个生命周期，不写就会停留在当前生命周期，无法完成页面跳转哦，值得注意的是，afterEach已经完成了页面跳转了，所以不需要再写next咯

这几个生命周期函数接受一个回调函数，回调函数里接收三个参数--to,from,next

to表示你路由要跳去的地址

from表示你从哪儿跳去的

next()函数表示你要去到下一个生命周期，不写就不会去到哦

比如我的页面结构是首页('/home')，登录页('/login')，初始页('/')重定向到首页，如果没有登录就跳转到登录页

现在我在beforeEach里写上身份检验，并打印to和from