# 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>로 전달된 콜백 실행


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/guard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.