> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/guard.md).

# Guard

## Vue Router Navigation Guard

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

{% embed url="<https://router.vuejs.org/guide/advanced/navigation-guards.html>" %}

### 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

{% embed url="<https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow>" %}

#### 원문

1. Navigation triggered.
2. Call <mark style="color:blue;">`beforeRouteLeave`</mark> guards in deactivated components.
3. Call global <mark style="color:blue;">`beforeEach`</mark> guards.
4. Call <mark style="color:blue;">`beforeRouteUpdate`</mark> guards in reused components.
5. Call <mark style="color:blue;">`beforeEnter`</mark> in route configs.
6. Resolve async route components.
7. Call <mark style="color:blue;">`beforeRouteEnter`</mark> in activated components.
8. Call global <mark style="color:blue;">`beforeResolve`</mark> guards.
9. Navigation is confirmed.
10. Call global <mark style="color:blue;">`afterEach`</mark> hooks.
11. DOM updates triggered.
12. Call callbacks passed to <mark style="color:blue;">`next`</mark> in <mark style="color:blue;">`beforeRouteEnter`</mark> guards with instantiated instances.

#### 번역

1. 탐색 실행
2. 발견된 컴포넌트의 <mark style="color:blue;">`beforeRouteLeave`</mark>  가드 실행
3. 전역 <mark style="color:blue;">`beforeEach`</mark> 가드 실행&#x20;
4. 재사용 컴포넌트인 경우 해당 컴포넌트의 <mark style="color:blue;">`beforeRouteUpdate`</mark> 가드 실행
5. 라우터 설정의 <mark style="color:blue;">`beforeEnter`</mark> 가드 실행
6. 비동기 컴포넌트 라우팅 처리
7. 활성화된 컴포넌트의 <mark style="color:blue;">`beforeRouteEnter`</mark> 가드 실행
8. 전역 <mark style="color:blue;">`berforeResolve`</mark> 가드 실행
9. 안내 완료  &#x20;
10. 전역 <mark style="color:blue;">`afterEach`</mark> 훅 실행
11. DOM 업데이트 실행
12. 전역  &#x20;
13. DOM updates triggered
14. <mark style="color:blue;">`beforeRouteEnter`</mark> 가드에서 <mark style="color:blue;">`next()`</mark>로 전달된 콜백 실행