vue-router进阶（router.beforeEach((to, from, next)，router.beforeResolve( to,from,next )）等等

前言：之前写过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已经可以用了，所以不支持传递回调，也没意义！！！