vue-router路由守卫

189 阅读1分钟

导航守卫执行顺序

  • 全局前置守卫 beforeEach
  • 路由独享守卫 beforeEnter
  • 组件路由守卫 beforeRouteEnter 此时this并不指向this,可通过回调获取
  • 全局解析守卫 beforeResolve
  • 全局后置守卫 afterEach
  • 组件生命周期 beforeCreate
  • created
  • beforeMount
  • mounted
  • 组件路由守卫 beforeRouteEnter的next回调

全局导航钩子

全局导航分为两种,前置守卫beforeEach和后置守卫afterEach

  • const router = new VueRouter({...})
  • router.beforeEach((to, from, next) => {...})
  • router.afterEach(同上)

路由独享钩子

beforeEnter

组件内的导航钩子

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave