vue-router导航守卫
【一】分类
导航守卫分为：全局守卫、路由独享守卫、组件守卫三种
【二】全局守卫
指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数，如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve（2.5+）、afterEach三个（以下的钩子函数都是按执行顺序讲解的）
1、[beforeEach]：在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。 2、[beforeResolve]（2.5+）：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：
区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。 3、[afterEach]：和beforeEach相反，他是在路由跳转完成后触发，参数包括to,from没有了next（参数会单独介绍）,他发生在beforeEach和beforeResolve之后，
beforeRouteEnter（组件内守卫，后讲）之前。
【三】路由独享守卫
指在单个路由配置的时候也可以设置的钩子函数 和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next
执行顺序：
【四】组件钩子
指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。
钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate (2.2+)、beforeRouteLeave三个
语法：
beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` }
[beforeRouteEnter]：路由进入之前调用，参数包括to，from，next。该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）。
beforeRouteEnter (to, from, next) { // 这里还无法访问到组件实例，this === undefined next( vm => { // 通过 `vm` 访问组件实例 }) }
[beforeRouteUpdate] (v 2.2+)：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。可能有的同学会疑问，what is 路由改变 or what is 组件被复用？
- 对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用
- 当前路由query变更时，该守卫会被调用
[beforeRouteLeave]：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。
【五】全部顺序
【六】小结
全局路由钩子：beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from)； 独享路由钩子：beforeEnter(to,from, next)； 组件内路由钩子：beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)
我们最后屡一下顺序：
当点击切换路由时：beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->
afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter的next的回调 当路由更新时：beforeRouteUpdate
.
.
