[JavaScript知识库]vue（2.0）中的七种路由守卫

路由守卫(导航守卫)分为三种：全局守卫（3个）、路由独享守卫（1个）、组件的守卫（3个）

路由守卫：就是在路由跳转的过程中触发的钩子函数，可以在每一个钩子函数里面进行相应的操作，例如说：路由拦截（在访问页面的时候需要登录验证，如果登录过了，直接显示，没有登录显示在登录页面）还可以终止路由跳转

一、全局守卫? 需要在路由器文件下进行定义

? ? ? ? ①全局的路由前置守卫：可以进行登录界面是否要显示；

? ? ? ? ? ? ? ? 例如：个人中心、购物车、收藏等界面需要登录之后才能访问，可以在改守卫进行判断

? ? ? ??

router.beforeEach((to,from,next)=>{
// to  目标的路由对象
// feom 从哪个路由跳转过来的对象
// next() 是一个函数 交给下一个路由进行执行，如果回调函数里面添加next()参数  需要手动调用                
           next()函数，如果不加next()参数，就可以直接触发下一个钩子函数，next()还可以实现终止 
          路由跳转
 console.log(" 1. 全局的前置守卫 beforeEach,只有路由发生变化，钩子函数就会被触发，类似watch监            
                   听$route变化");
  next()
})

? ? ? ? ②全局的解析守卫

? ? ? ??

router.beforeResolve((to,from,next)=>{
  console.log("2.全局的解析守卫");
  next()
})

? ? ? ? ③全局的后置守卫

router.afterEach((to,from,next)=>{
  console.log("3.全局的后置守卫,可以理解为是导航跳转过程的最后的一个守卫，钩子函数不用添加 
next的调用");
})

二、路由独享守卫：定义在router的index.js，配置的路由字段里面

beforeEnter: (to, from, next) => {
      console.log("路由独享守卫，在进入路由之前触发,该钩子函数一般不会去使用");
      next()
    }

三、路由的组件守卫：定义在一个路由界面的里面

? ? ? ? ①在进入路由组件之前触发，发送请求时可以在created等中，还可以在beforeRouteEnter的next的回调函数进行发送请求

beforeRouteEnter(to,from,next){
    console.log("进入路由组件之前触发");
    next(vm=>{
      console.log("afterEach后置守卫执行完之后会把组件实例this传进beforeRouteEnter,参数就是this组件对象",vm);
    })
  },

? ? ? ? ②当前路由组件更新的时候触发；

? ? ? ? ? ? ? ?例如：/about/1? ? ?/about/2? 动态路由发生变化的时候

? ? ? ? ? ? ? ?例如：/about？name='lucky'? ? /about?name='xiaoming'? ?url参数发生变化的时候

  beforeRouteUpdate(to,from,next){
    console.log("当前路由组件更新的时候触发，当动态路由发生变化的时候，或者是拼接字符串传数据的这个数剧发生变化也会触发");
    next()
  },

? ? ? ? ③在离开组件之前的时候触发；

  beforeRouteLeave(to,from,next){
    console.log("在离开组件之前触发，一般会在此钩子函数里面询问是否要离开该页面");
    var answer = window.confirm("Do you want  leave  this page? have some unsave changes");
    if(answer){
      // 如果点击确定  离开该页面  也就是路由继续跳转
      next()
    }else{
      // 停留在该页面，路由不能再跳转
      next(false);  // 终止跳转
    }
  },

四、路由守卫执行的过程？（熟知）

? ? 1.在失活的组件里面先执行组件离开的守卫(beforeRouteLeave)

? ? 2.调用全局的前置守卫(beforeEach)

? ? ??????附加：会执行重复调用组件守卫的beforeRouteUpdate

? ? 3.再去执行路由的独享守卫(beforeEnter)

? ? 4.再去执行组件内部的beforeRouteEnter守卫

? ? 5.在去执行全局的解析守卫beforeResolve

? ? 6.最后执行全局的后置守卫afterEach

? ? 7.最后把afterEach的this传递到了组件内部this对象里面