VUE 路由守卫的三种类型

全局路由守卫

1、beforeEach(to, from, next) 全局前置守卫

2、beforeResolve(to, from, next) 全局解析守卫

3、afterEach(to, from, next) 全局后置守卫

const router = new VueRouter({ ... });

router.beforeEach((to, form, next) => {
  console.log('全局前置守卫 beforeEach')
  next()
})
router.beforeResolve((to, form, next) => {
  console.log('全局解析守卫 beforeResolve')
  next()
})
router.afterEach((to, form) => {
  console.log('全局后置守卫 afterEach')
})

路由独享守卫

1、beforeEnter(to, from, next) 

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

组件路由守卫

1、beforeRouteEnter(to, from, next) 

2、beforeRouteUpdate(to, from, next) 

3、beforeRouteLeave(to, from, next) 

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {

  },
  beforeRouteUpdate(to, from, next) {

  },
  beforeRouteLeave(to, from, next) {

  },
}