router进阶（router.beforeEach((to, from, next)，router

前言：之前写过vue-router的基本用法。这次写一篇router的进阶版。👉 全局守卫 全局守卫介绍
全局前置守卫（项目中都要用到）   router.beforeEach( to,from,next ) =>{ }  
全局解析守卫   router.beforeResolve( to,from,next ) =>{ }  
全局后置守卫   router.afterEach( to,from )=>{ }  

详解：👇

1、常用于登录验证；

2、使用 router.beforeEach 可注册一个全局前置守卫；

3、每当一个导航被触发时，首先被调用的总是全局前置守卫 ;

4、该守卫接受三个参数：to、from、next，三个参数意思分别是：

to：即将要进入的目标路由对象（路由对象）

form：当前导航正要离开的路由（路由对象）

next： 此方法，必须调用，如果想跳转的话，否则路由将不会跳转（方法）

router.beforeEach((to,from,next)=>{ console.log(to) console.log(from) console.log(next) next() }) 解析 to ：是跳转后的目标路由对象
（例如：从 / index 跳转到 / router 那么to指代的就是后者对象）；   from：是之前的路由对象 / index。
（form和to相反，指代的是前者）   next：则是一个函数，next函数决定路由是否跳转
（路由守卫里必用的一个方法，否则将不会进行下一步。）  

next方法中可以传参数

next（参数）解释
next（ false）   进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。  
next （ ’ / ’ ）                                 next( ’ / ‘)或者next({ paht：’ / ’ })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项  
next（ error ）   next( error )：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。  

全局解析守卫 router.beforeResolve( ( to,from,next)=>{ } )
官方文档：2.5.0新增的一个守卫，在导航被确认之前，同时在所有组件守卫和异步路由被解析之后（加载完之后），解析守卫会被调用。。。

全局后置钩子router.afterEach( ( to,from)=>{ } )
与守卫不同的是，此钩子函数不会接受next函数，也不会改变导航本身。。。是在全局解析守卫之后被调用。。。

路由专享守卫 const router = new VueRouter({ routes: [ { path: '/play', component: Play, beforeEnter: (to, from, next) => {} } ] }) 组件守卫 export default { name:'router', beforeRouteEnter(to,from,next){ // 在渲染组件前调用，不能获取this，组件实例还未被挂载 next() }, beforeRouteUpdate(to,from,next){ // 在当前路由改变，但当前组件被复用时调用， // 比如：带有动态参数的路径，/foo/1 跳转 /foo/2 时， // 该钩子函数被调用。（可访问组件实例this） next() }, beforeRouteLeave(to,from,next){ // 离开该组件对应的路由时，该钩子函数会被调用 next() } }

beforeRouterEnter 守卫不能够访问this，因为守卫在导航确认前被掉用，即将登场的新组件还未被创建。

当然如果你非要在此守卫中用到this，官方也给出了一个方法，你可以在next函数中传一个回调函数，并把实例作为参数传到回调函数中去，这样您就可以使用this了。

export default { name:'play', beforeRouteEnter(to,from,next){ next((_this)=>{ // 通过 _this来访问实例 }) } }

《官方提醒》
beforeRouterEnter是支持给next函数传递回调的唯一守卫；
对于beforeRouterUpdate守卫 和 beforeRouterLeave守卫来说，this已经可以用了，所以不支持传递回调，也没意义！！！