导航守卫是什么？

导航守卫就是路由跳转过程中的一些钩子函数，直白点说：路由跳转是一个大过程，这个大过程分为跳转前中后等等细小的过程，在每一个过程中都有一个函数，让你能够在跳转的前中后某个时机操作一些内容。

导航守卫的执行顺序图

导航守卫执行顺序图

导航守卫的全解析

1.导航守卫划分：

全局的导航、单个路由独享的导航、组件内的导航三种：

• 【全局的】：是指由路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发。钩子函数包括beforeEach、beforeResolve、afterEach三个

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

1.[beforeEach]：在路由跳转前触发，参数包括to，from，next。这个钩子经常用于登录验证，往往路由还没有跳转提前告知，以免跳转了再告知就为时已晚
2.[beforeResolve]：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to，from，next三个，和beforeEach区别：即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
3.[afterEach]：和beforeEach相反，他是再路由跳转完成后触发的，参数包括to，from。他发生在beforeEach和beforeResolve之后

• 【路由独享的】：是指在单个路由配置的时候也可以设置的钩子函数，其位置就是下面示例中的位置，也就是说像foo这样的组件都存在这样的钩子函数。目前只有一个钩子函数beforeEnter。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to，from，next

• 【组件内的】：是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个，执行顺序如下

<template>
  ...
</template>
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
<style>
  ...
</style>

[beforeRouteEnter]：路由进入之前调用，参数包括to，from，next。该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局的beforeResolve和全局的afterEach之前调用，要注意的是该守卫内访问不到组件实例，也就是this为undefined，因为他是在beforeCreate生命周期前触发的。在这个钩子函数中，可以通过传一个next来访问组件实例，在导航被确认的时候执行回调方法的参数，可以在这个守卫中请求服务端来获取数据，当成功获取并能进入路由时，调用next并在回调中通过vm访问组件实例进行操作：为了确保能对组件实例的完整访问。

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

[beforeRouteUpdate]：在当前路由改变时，并且该组件被复用时调用，可以通过this访问vue实例。参数包括to，from，next。
什么时候是路由改变什么时候是路由被复用？
1.对于一个带有动态参数的路径/foo:id，在/foo:1和/foo:2之间的跳转的时候，组件实例会被服用，该守卫会被调用
2.当前路由query变更时，该路由守卫会被调用
[beforeRouteLeave]：导航离开该组件的对应路由时调用，可以访问组件实例的this，包括参数to，from，next
到此，所有钩子解释完毕

导航守卫回调参数

to：目标路由对象
from：即将离开的路由对象
next：这是最重要的一个参数，请注意以下几点内容：
1.但凡涉及next参数的钩子，必须调用next()才能继续执行下一个钩子，否则路由跳转会停止，也就是说，就算你不进行任何操作，也需要在守卫中调用一下next，否则路由会停止跳转。

2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。（主要用于登录验证不通过的处理）

3.当然next可以这样使用，next('/')或者 next({ path: '/' }):跳转到一个不同的地址。意思是当前的导航被中断，然后进行一个新的导航。可传递的参数与router.push中选项一致

4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。

5.next(error):如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()

最后捋一下路由执行的顺序：

当点击切换路由时：beforeRouterLeave --> beforeEach --> beforeEnter --> beforeRouteEnter --> beforeResolve --> afterEach --> beforeCreate --> created --> beforeMount --> mounted --> beforeRouteEnter的next的回调