vue导航守卫

作者: 一条小团团ovo的就很棒 | 来源:发表于2019-04-17 19:59 被阅读23次

    导航守卫:vue-router主要提供跳转或取消的方式守卫导航, 导航守卫分为全局前置守卫、全局解析守卫、全局后置钩子、路由独享的守卫、组件内的守卫

    • 全局前置守卫

    beforeEach(router.beforeEach((to,from,next)=>{})),当一个导航触发时,全局前置守卫按照创建顺序调用,守卫是异步解析执行,此时导航在所有守卫resolve(解析)之前一直在等待中,每个守卫含有三个参数:to、from、next:

    1)to:即将进入的路由目标对象

    2)from:当前导航离开的路由

    3)next:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    a)next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    b)next(false):中断当前的导航,如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    c)next("/login")或next({path:"/login"}):跳转到login页面
    d)next(error):如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

    例:

       router.beforeEach((to,from,next)=>{
           if(to.path=="/login"){
                 next()
           }else{
                 let token=localStorage.getItem("token");
                 if(token==null || token=="" ){
                       next("/login")
                 }else{
                       next()
                 }
           }
       })
    }
    
    • 全局后置钩子

      afterEach(router.afterEach((to,from)=>{})), 只有两个参数,to:进入到哪个路由,from:从哪个路由离开。
    • 路由独享的导航钩子

      beforeEnter((to,from,next)=>{})r:即单个路由独享的导航钩子,它是在路由配置上直接进行定义的
          const router=new Router({
              mode:"history",
              routes:[
                  {
                      path:"/home",
                      component:resolve=>require(["../components/home.vue"],resolve),
                      beforeEnter((to,from,next)=>{
                            //do something
                      })
                   }
              ]
          })
    
    • 组件内的守卫

      1.beforeRouteEnter((to,from,next)=>{}):导航进入该组件的对应路由时调用(此时this不可用)

       beforeRouteEnter((to,from,next)=>{
           next(vm=>{
           })
       })
      

      2.beforeRouteUpdate((to,from,next)=>{}):在当前路由改变,但是该组件被复用时调用(此刻this可用,不支持回调)

      beforeRouteUpdate((to,from,next)=>{
             this.name=to.params.name;
              next()   
       })
    

    3.beforeRouteLeave((to,from,next)=>{}):导航离开该组件的对应路由时调用

    (这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消,此刻this也可用)

    beforeRouteLeave((to,from,next)=>{
         if(to.path=="/home"){
             next(false)
         }
     })
    

    相关文章

      网友评论

        本文标题:vue导航守卫

        本文链接:https://www.haomeiwen.com/subject/nprpwqtx.html