Guard

Vue Router Navigation Guard

이 문서에서는 Vue Router에서 제공하는 가드 기능을 사용하는 방법에 대해서 다룬다.

Vue Routerrouter.vuejs.org

Navigation Guard?

Navigation Guard 는 Vue Router 에서 라우팅을 처리할 때 간섭을 통해 차단 또는 추가 작업을 수행할 수 있는 기능이다. 다음과 같은 종류가 있다.

• Global before each guard

• Global resolve guard

• Global after each guard

• Pre route guard

• In component guard

Navigation Flow

Vue Routerrouter.vuejs.org

원문

1. Navigation triggered.

2. Call beforeRouteLeave guards in deactivated components.

3. Call global beforeEach guards.

4. Call beforeRouteUpdate guards in reused components.

5. Call beforeEnter in route configs.

6. Resolve async route components.

7. Call beforeRouteEnter in activated components.

8. Call global beforeResolve guards.

9. Navigation is confirmed.

10. Call global afterEach hooks.

11. DOM updates triggered.

12. Call callbacks passed to next in beforeRouteEnter guards with instantiated instances.

번역

1. 탐색 실행

2. 발견된 컴포넌트의 beforeRouteLeave 가드 실행

3. 전역 beforeEach 가드 실행

4. 재사용 컴포넌트인 경우 해당 컴포넌트의 beforeRouteUpdate 가드 실행

5. 라우터 설정의 beforeEnter 가드 실행

6. 비동기 컴포넌트 라우팅 처리

7. 활성화된 컴포넌트의 beforeRouteEnter 가드 실행

8. 전역 berforeResolve 가드 실행

9. 안내 완료

10. 전역 afterEach 훅 실행

11. DOM 업데이트 실행

12. 전역

13. DOM updates triggered

14. beforeRouteEnter 가드에서 next()로 전달된 콜백 실행