Skip to content

[Korean] Update vue-router 2.5 #1370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 26, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions docs/kr/advanced/data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,21 +84,20 @@ export default {
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
if (err) {
// 일부 전역 오류 메시지 표시
next(false)
} else {
next(vm => {
vm.post = post
})
}
next(vm => vm.setData(err, post))
})
},
// 경로가 변경되고 이 컴포넌트가 이미 렌더링된 경우 로직은 약간 달라집니다.
watch: {
$route () {
this.post = null
// 라우트가 변경되면 메소드를 다시 호출합니다
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// getPost를 데이터 페치 유틸리티/API 래퍼로 바꿉니다.
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
Expand Down
28 changes: 27 additions & 1 deletion docs/kr/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

이름에서 알 수 있듯이 `vue-router`가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다.

**Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다**. 단순히 [`$route` 객체를 감시](../essentials/dynamic-matching.md#reacting-to-params-changes)하고 그 변화에 반응하십시오.
**Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다**. 단순히 [`$route` 객체를 감시](../essentials/dynamic-matching.md#reacting-to-params-changes)하고 그 변화에 반응하십시오. 또는 컴포넌트 가드의 `beforeRouteUpadte`를 사용하십시오

### 전역 가드

Expand Down Expand Up @@ -32,8 +32,19 @@ router.beforeEach((to, from, next) => {

- **`next('/')` 또는 `next({ path: '/' })`**: 다른 위치로 리디렉션합니다. 현재 네비게이션이 중단되고 새 네비게이션이 시작됩니다.

- **`next(error)`**: (2.4.0 이후 추가) `next`에 전달된 인자가 `Error` 의 인스턴스이면 탐색이 중단되고 `router.onError()`를 이용해 등록 된 콜백에 에러가 전달됩니다.


**항상 `next` 함수를 호출하십시오. 그렇지 않으면 훅이 절대 불러지지 않습니다.**

### Global Resolve Guards

> 2.5.0에서 추가됨

2.5.0 이후로 `router.onResolve`를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 `router.beforeEach`와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다

### Global After Hooks

전역 훅을 등록 할 수도 있지만, 가드와 달리 이 훅은 `next` 함수를 얻지 못하며 네비게이션에 영향을 줄 수 없습니다.

``` js
Expand Down Expand Up @@ -98,3 +109,18 @@ beforeRouteEnter (to, from, next) {
```

`beforeRouteLeave` 안에서 `this`에 직접 접근 할 수 있습니다. leave 가드는 일반적으로 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는데 사용됩니다. 탐색은 `next(false)`를 호출하여 취소할 수 있습니다.

### 전체 가드 시나리오

1. 네비게이션이 트리거됨
2. 비활성화될 컴포넌트에서 가드를 호출
3. 전역 `beforeEach` 가드 호출
4. 재사용되는 컴포넌트에서 `beforeRouteUpdate` 가드 호출 (2.2 이상)
5. 라우트 설정에서 `beforeEnter` 호출
6. 비동기 라우트 컴포넌트 해결
7. 활성화된 컴포넌트에서 `beforeRouteEnter` 호출
8. 전역 `beforeResolve` 가드 호출 (2.5이상)
9. 네비게이션 완료.
10. 전역 `afterEach` 훅 호출
11. DOM 갱신 트리거 됨
12. 인스턴스화 된 인스턴스들의 `beforeRouteEnter`가드에서 `next`에 전달 된 콜백을 호출합니다
1 change: 1 addition & 0 deletions docs/kr/api/component-injections.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
### 활성화된 옵션

- **beforeRouteEnter**
- **beforeRouteUpdate** (2.2에서 추가됨)
- **beforeRouteLeave**

[컴포넌트 내부 가드](../advanced/navigation-guards.md#incomponent-guards)를 확인하세요.
18 changes: 18 additions & 0 deletions docs/kr/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,16 @@

전역의 `<router-link>` 기본 active 클래스를 설정하십시오. [router-link](router-link.md)를 확인하세요.

### linkExactActiveClass

> 2.5.0+

- 자료형: `string`

- 기본값: `"router-link-exact-active"`

전역으로 `<router-link>`에서 사용할 정확하게 일치하는 경우의 클래스를 설정할 수 있습니다. [router-link](router-link.md)를 확인하세요.

### scrollBehavior

- 자료형: `Function`
Expand All @@ -67,3 +77,11 @@
```

[Scroll 동작](../advanced/scroll-behavior.md)를 확인하세요.

### parseQuery / stringifyQuery

> 2.4.0+

- 자료형: `Function`

사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다.
16 changes: 14 additions & 2 deletions docs/kr/api/router-instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@
### Methods

- **router.beforeEach(guard)**
- **router.beforeResolve(guard)** (2.5.0+)
- **router.afterEach(hook)**

전역 네비게이션 가드 추가. [네비게이션 가드](../advanced/navigation-guards.md)를 보십시오.
전역 네비게이션 가드 추가. [네비게이션 가드](../advanced/navigation-guards.md)를 보십시오.

2.5.0이상에서 세 가지 메소드 모두 등록된 guard / hook을 제거하는 함수를 반환합니다.

- **router.push(location, onComplete?, onAbort?)**
- **router.replace(location, onComplete?, onAbort?)**
Expand Down Expand Up @@ -60,10 +62,20 @@

라우터에 동적으로 더 많은 라우트를 추가할 수 있습니다. 전달인자는 `routes` 생성자 옵션과 동일한 경로 설정 포맷을 사용하는 배열이어야 합니다.

- **router.onReady(callback)**
- **router.onReady(callback, [errorCallback])**

> 2.2.0+

이 메소드는 라우터가 초기 탐색을 완료할 때 호출하는 콜백을 대기시킵니다. 즉, 초기 라우트와 연결된 모든 비동기 입력 훅 및 비동기 컴포넌트를 해결합니다.

이는 서버와 클라이언트 모두 일관된 출력을 보장하기 위해 서버측 렌더링을 사용할 때 유용합니다.

- **router.onError(callback)**

> 2.4.0+

라우트 탐색 중에 에러가 발견되면 호출 될 콜백을 등록하십시오. 호출 할 에러에 유의하십시오. 에러는 다음 시나리오 중 하나이어야합니다.

- 에러는 라우트 가드 기능 내에서 동기적으로 발생한 경우.
- 에러는 라우트 가드 함수 내에서 `next(err)`를 호출하여 캐치한 경우
- 라우트를 렌더링하는데 필요한 비동기 컴포넌트를 처리하려고 할 때 에러가 발생한 경우.
9 changes: 9 additions & 0 deletions docs/kr/api/router-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,15 @@

링크 네비게이션을 트리거 할 수있는 이벤트를 지정합니다.

- **exact-active-class**

> 2.5.0+
- 자료형: `string`
- 기본값: `"router-link-exact-active"`

정확하게 일치하는 링크가 활성된 상태일 때 적용되는 CSS 클래스를 지정합니다. 기본값은`linkExactActiveClass` 라우터 생성자 옵션을 통해 전역으로 설정 될 수 있습니다.


### 외부 엘리먼트에 active 클래스 적용하기

때로 우리는 active 클래스가 `<a>` 태그 자체가 아닌 외부 엘리먼트에 적용되는 것을 원할 수 있습니다. 이 경우 `<router-link>` 를 사용하여 외부 엘리먼트를 렌더링하고 원시 `<a>`는 내부에 작성합니다.
Expand Down
11 changes: 11 additions & 0 deletions docs/kr/essentials/dynamic-matching.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ const User = {
}
```

또는 2.2에서 소개된 `beforeRouteUpdate` 가드를 사용하십시오.
```js
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
```

### 고급 매칭 패턴

`vue-router`는 라우트 매칭 엔진으로 [path-to-regexp](https://github.com/pillarjs/path-to-regexp)를 사용하기 때문에 선택적 동적 세그먼트, 0개 이상/하나 이상의 요구 사항, 심지어 커스텀 정규식 패턴과 같은 많은 고급 매칭 패턴을 지원합니다. 이 고급 패턴들과 `vue-router`에서 사용하는 [예제](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js)에 대한 [문서](https://github.com/pillarjs/path-to-regexp#parameters)를 확인하십시오.
Expand Down
2 changes: 2 additions & 0 deletions docs/kr/essentials/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

#### `router.push(location, onComplete?, onAbort?)`

**참고: Vue 인스턴스 내부에서 라우터 인스턴스에 `$router`로 액세스 할 수 있습니다. 그러므로`this.$router.push`를 사용 할 수 있습니다.**

다른 URL로 이동하려면 `router.push`를 사용하십시오. 이 메소드는 새로운 항목을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게된다.

이것은 `<router-link>`를 클릭 할 때 내부적으로 호출되는 메소드이므로 `<router-link :to="...">`를 클릭하면 `router.push(...)`를 호출하는 것과 같습니다.
Expand Down