vue 易混淆的路由钩子函数

vue 路由钩子函数

1.全局解析守卫

1.前置钩子函数 ------router.beforeEach
const router = new VueRouter({ ... })
//在全局路由上定义
router.beforeEach((to, from, next) => {
  // ...
})
//to: Route: 即将要进入的目标 路由对象
//from: Route: 当前导航正要离开的路由
//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

2.后置钩子函数(同上)
const router = new VueRouter({ ... })
//在全局路由上定义
router.afterEach((to, from) => {
  // ...
})
//不同之处是：后置钩子不会接受 next 函数也不会改变导航本身

2.路由独享的守卫

//可以在路由配置上直接定义 beforeEnter 守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.组件内的守卫

//可以在路由组件内直接定义以下路由导航守卫
1.beforeRouteEnter (to, from, next) {
 // beforeRouteEnter 守卫不能访问this，因为守卫在导航确认前被调用，因此即将访问的新组件还没被创建。
     next(vm => {
     // 通过 `vm` 访问组件实例
      })
    }
2.beforeRouteUpdate (to, from, next) {
        //可以访问到this
        next()
    }
3.beforeRouteLeave (to, from, next) {
        //可以访问到this
        next()
    }

注：$route(to,from)不是钩子函数，它的用途是监听路由变化，不要混淆哦。。。