vue（2.0）中的七种路由守卫

最新推荐文章于 2024-05-16 18:49:15 发布

H_lucky_

最新推荐文章于 2024-05-16 18:49:15 发布

阅读量3.4k

点赞数

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/H_lucky_/article/details/127121132

版权

路由守卫(导航守卫)分为三种：全局守卫（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对象里面