VUE的几种路由钩子

全局钩子

在main.js中写入：

beforeEach（（to,from,next）=>{ }）：全局前置守卫

Router.beforeEach((to,from,next)=>{
      ......
})

afterEach（（to,from）=>{ }）：全局后置钩子

Router.afterEach((to,from)=>{
      ......
})

某个路由独享钩子

在路由配置中定义的钩子

beforeEnter

{
  path:"/home",
  component:resolve=>require(["../components/home.vue"],resolve),
  beforeEnter:(to,from,next)=>{
      ......
  }
}

beforeLeave

{
  path:"/home",
  component:resolve=>require(["../components/home.vue"],resolve),
  beforeLeave:(to,from,next)=>{
      ......
  }
}

组件内钩子

在路由组件里定义的导航钩子

beforeRouteLeave

 methods:{
      beforeRouteLeave(to,from,next){
            .......
      }
  }

beforeRouteEnter

 methods:{
      beforeRouteEnter(to,from,next){
            .......
      }
  }

beforeRouteUpdate

 methods:{
      beforeRouteUpdate(to,from,next){
            .......
      }
  }
  

参数说明·：

钩子参数：

参数	说明
to：Route	即将要进入的目标 路由对象
from：Route	当前导航正要离开的路由
next：Function	这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数

next的参数：

参数	说明
next()	进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）
next（false）	中断当前的导航