我们在每学一项新知识的时候，首先我们得至少这项知识有什么用，能为我们解决什么问题。对吧？
导航守卫，也称路由守卫
怎么理解这个名词呢？
官方解释：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
简单来说，就是路由跳转时我们要进行的操作
举个栗子，比如登录跳转
我们在登录跳转之前必须先做登录验证
在我们没有登陆之前，我们当然不能跳转到某个路由对象

以下内容是我结合官方文档总结出来的↓↓↓

路由守卫可以分成以下几类

一、全局前置守卫
二、全局解析守卫
三、全局后置钩子
四、路由独享守卫
五、组件内守卫

我们先看一下整个导航解析流程↓↓↓

一个完整的导航解析流程

一、导航被触发
二、在失活的组件，也就是即将离开的页面组件里调用离开守卫beforeRouteLeave
三、调用全局的前置守卫beforeEach
四、在重用的组件里调用里调用beforeRouteUpdate
五、调用路由独享的守卫beforeEnter
六、解析异步路由组件
七、在被激活的组件里，也就是即将进入的页面组件里面调用beforeRouteEnter
八、调用全局的解析守卫beforeResolve
九、导航被确认
十、调用全局的后置钩子afterEach
十一、触发DOM更新
十二、创建好的实例调用beforeRouteEnter守卫里传给next的回调函数

全局前置守卫

我们可以使用router.beforeEach注册一个全局前置路由
前置路由里面放的是页面跳转之前要处理的逻辑
router.beforeEach( (to, from, next) => { } )
当一个导航触发时，全局前置路由按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

参数解析：
to：即将要进入的目标
from：当前导航正要离开的路由
next：前面的to的from都是路由对象，而这里的next是一个方法，一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数。

1. next()进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed
2. next(false)中断当前的导航。如果浏览器的URL改变了(可能是用户手动点击浏览器后退按钮) ，那个URL地址会重置到from路由对应的地址。
3. next(‘/’)或者next({ path: ‘/’})跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
4. next(error)如果传入next的参数是一个Error实例，则导航会被种植且该错误会被传递给router.onError()注册过的回调。

确保要调用next方法，否则钩子就不会被resolved

全局解析守卫

我们可以用router.beforeResolve注册一个全局守卫。
router.beforeResolve(to, from, next)也是一个全局守卫，这和router.beforeEach类似，区别是在导航被确认(所有导航钩子都结束)之前，同时在所有组件内守卫和异步路由被解析之后，解析守卫就被调用。

全局后置钩子

一般是用于处理路由跳转后的一些操作
router.afterEach( (to, from) => {} )

路由独享守卫

路由独享守卫是在路由列表里面配置
如：

{
  path: ‘home’,
  component: Home,
  beforeEnter: (to, from, next) => {
  if (from.name == login) { console.log(‘这是从登录页跳转过来的’)}
  else { console.log(‘这不是从登录页跳转过来的’) }
  next()  //如果添加了beforeEnter()记得一定要调用next()这个钩子，要不然路由不会跳转
  }
}

组件内守卫

组件内守卫，就是在.vue文件里面的守卫
有三个钩子函数

beforeRouteEnter-进入组件之前

beforeRouteEnter(to, from, next){}  //页面还没渲染好的时候调用，不能使用this

在进入组件前被调用，组件实例还没有被创建，不能使用this关键字

不过可以通过传一个回调next来访问组件实例，也就是可以通过next回调实例化后的组件，用next函数的vm参数充当this

export default {
  data(){
    return{
      infor:'ThinkBig'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
  //此时该组件还没被实例化
    alert(this.infor);       //弹出消息框信息为 undefined
      next(vm =>{
      //此时该组件被实例化了
        alert(vm.infor);         //弹出消息框信息为 ThinkBig
      })
}

beforeRouteLeave-离开组件之后

离开组件之后调用，可以调用this关键字
beforeRouteLeave(to, from, next) {}

export default {
  beforeRouteLeave(to,from,next){
    if(confirm("确定离开吗？") == true){
      next()   //跳转到另一个路由
    }else{
      next(false);//不跳转
    }
  }
}

boforeRouteUpdate-组件复用触发更新

该组件被复用时调用，可以调用this关键字

boforeRouteUpdate(to, from, next) {
  //在当前路由改变，但是该组件被复用时调用
  //举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  //由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //可以访问组件实例 `this`
}