vue-router有几种钩子函数？具体是什么及其参数

• 全局路由

  • 全局前置守卫：beforeEach

    const router = new VueRouter({
              ... })
    router.beforeEach((to, from, next) => {
             
         	// ...
    })
    

    每个守卫方法接收三个参数：

    • to: Route: 即将要进入的目标 路由对象
    • from: Route: 当前导航正要离开的路由
    • next: Function: 一定要调用该方法不然会阻塞路由。执行效果依赖 next 方法的调用参数。

    next（）方法接收的参数：

    • next(): 进行管道中的下一个钩子。
    • next(false): 中断当前的导航。回到到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。
    • next(error): 导航终止，且该错误会被传递给 router.onError() 注册过的回调。

  • 全局后置钩子：afterEach

    router.afterEach((to, from) => {
         // do someting
    });
    

    注意：不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身。

• 路由独享的钩子

  即单个路由独享的导航钩子，它是在路由配置上直接进行定义的，参数的使用，和全局前置守卫是一样的。

  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })
  

• 组件内的导航钩子

  • beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用
  • beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用
  • beforeRouteLeave：导航离开该组件的对应路由时调用

  三者参数都与全局前置守卫一样

  注意：beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this