路由守卫是什么

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，导航守卫就是路由跳转过程中的一些钩子函数，类似于组件生命周期钩子函数。

三种路由守卫分类

【1】全局守卫： 是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，触发路由就会触发这些钩子函数。

• beforeEach(to,from,next)
  在路由跳转前触发，这个钩子的作用主要是用于登录验证，也就是鲁豫还没跳转提前告知，以免跳转了再通知就为时已晚。
• beforeResolve(to,from,next)
  这个钩子和beforeEach类似，也是路由跳转前触发，区别是再导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在beforeEach和组件内beforeRouteEnter之后，afterEach之前调用。
• afterEach(to,from)
  和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。这些钩子不会接收next函数也不会改变导航本身。

【2】路由守卫： 是指在单个路由配置的时候也可以设置钩子函数

• beforeEnter(to,from,next)
  和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫。

【3】组件守卫 是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于配置路由的组件添加的生命周期钩子函数

• beforeRouteEnter(to,from,next)
  该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined。因为它在组件生命周期beforeCreate阶段触发，此时的新组件还没有被创建。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
• beforeRouteUpdate(to,from,next)
  在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。
• beforeRouteLeave(to,from,next)
  导航离开该组件的对应路由时调用，可以访问组件实例this。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next( false )来取消。

参数介绍

to：即将要进入的目标路由对象
from：即将要离开的路由对象
next：涉及到next参数的钩子函数，必须调用next()方法来resolve这个钩子，否则路由会中断在这，不会继续往下执行