vue导航守卫

导航守卫：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)
     }
 })