From c0a69954341e048ba82982c2787307f693de44cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ChangJoo=20Park=28=EB=B0=95=EC=B0=BD=EC=A3=BC=29?= Date: Tue, 25 Apr 2017 21:42:17 +0900 Subject: [PATCH 1/2] [Korean] Update vue-router 2.5 --- docs/kr/advanced/data-fetching.md | 21 +++++++++---------- docs/kr/advanced/navigation-guards.md | 29 +++++++++++++++++++++++++- docs/kr/api/component-injections.md | 1 + docs/kr/api/options.md | 18 ++++++++++++++++ docs/kr/api/router-instance.md | 16 ++++++++++++-- docs/kr/api/router-link.md | 9 ++++++++ docs/kr/essentials/dynamic-matching.md | 11 ++++++++++ docs/kr/essentials/navigation.md | 2 ++ 8 files changed, 93 insertions(+), 14 deletions(-) diff --git a/docs/kr/advanced/data-fetching.md b/docs/kr/advanced/data-fetching.md index 66e4a794c..03b5ec33e 100644 --- a/docs/kr/advanced/data-fetching.md +++ b/docs/kr/advanced/data-fetching.md @@ -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 { diff --git a/docs/kr/advanced/navigation-guards.md b/docs/kr/advanced/navigation-guards.md index 4e7bd97d5..c19933eaf 100644 --- a/docs/kr/advanced/navigation-guards.md +++ b/docs/kr/advanced/navigation-guards.md @@ -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`를 사용하십시오 ### 전역 가드 @@ -32,8 +32,20 @@ router.beforeEach((to, from, next) => { - **`next('/')` 또는 `next({ path: '/' })`**: 다른 위치로 리디렉션합니다. 현재 네비게이션이 중단되고 새 네비게이션이 시작됩니다. + - **`next(error)`**: (2.4.0 이후 추가) `next`에 전달된 인자가 `Error` 의 인스턴스이면 탐색이 중단되고 `router.onError()`를 이용해 등록 된 콜백에 에러가 전달됩니다. + + **항상 `next` 함수를 호출하십시오. 그렇지 않으면 훅이 절대 불러지지 않습니다.** +### Global Resolve Guards + +> 2.5.0에서 추가됨 + +In 2.5.0+ you can register a global guard with `router.onResolve`. This is similar to `router.beforeEach`, with the difference that resolve guards will be called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**. +2.5.0 이후로 `router.onResolve`를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 `router.beforeEach`와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다 + +### Global After Hooks + 전역 훅을 등록 할 수도 있지만, 가드와 달리 이 훅은 `next` 함수를 얻지 못하며 네비게이션에 영향을 줄 수 없습니다. ``` js @@ -98,3 +110,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`에 전달 된 콜백을 호출합니다 \ No newline at end of file diff --git a/docs/kr/api/component-injections.md b/docs/kr/api/component-injections.md index c0c1d6fa1..d2eb3125b 100644 --- a/docs/kr/api/component-injections.md +++ b/docs/kr/api/component-injections.md @@ -15,6 +15,7 @@ ### 활성화된 옵션 - **beforeRouteEnter** +- **beforeRouteUpdate** (2.2에서 추가됨) - **beforeRouteLeave** [컴포넌트 내부 가드](../advanced/navigation-guards.md#incomponent-guards)를 확인하세요. diff --git a/docs/kr/api/options.md b/docs/kr/api/options.md index f8b2994e5..2509ef9ca 100644 --- a/docs/kr/api/options.md +++ b/docs/kr/api/options.md @@ -52,6 +52,16 @@ 전역의 `` 기본 active 클래스를 설정하십시오. [router-link](router-link.md)를 확인하세요. +### linkExactActiveClass + +> 2.5.0+ + +- 자료형: `string` + +- 기본값: `"router-link-exact-active"` + + 전역으로 ``에서 사용할 정확하게 일치하는 경우의 클래스를 설정할 수 있습니다. [router-link](router-link.md)를 확인하세요. + ### scrollBehavior - 자료형: `Function` @@ -67,3 +77,11 @@ ``` [Scroll 동작](../advanced/scroll-behavior.md)를 확인하세요. + +### parseQuery / stringifyQuery + +> 2.4.0+ + +- 자료형: `Function` + + 사용자 지정 쿼리 문자열 구문 분석/문자열화 함수를 사용할 수 있습니다. 기본 값을 오버라이드합니다. \ No newline at end of file diff --git a/docs/kr/api/router-instance.md b/docs/kr/api/router-instance.md index 5d460779b..352b1b406 100644 --- a/docs/kr/api/router-instance.md +++ b/docs/kr/api/router-instance.md @@ -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?)** @@ -60,10 +62,20 @@ 라우터에 동적으로 더 많은 라우트를 추가할 수 있습니다. 전달인자는 `routes` 생성자 옵션과 동일한 경로 설정 포맷을 사용하는 배열이어야 합니다. -- **router.onReady(callback)** +- **router.onReady(callback, [errorCallback])** > 2.2.0+ 이 메소드는 라우터가 초기 탐색을 완료할 때 호출하는 콜백을 대기시킵니다. 즉, 초기 라우트와 연결된 모든 비동기 입력 훅 및 비동기 컴포넌트를 해결합니다. 이는 서버와 클라이언트 모두 일관된 출력을 보장하기 위해 서버측 렌더링을 사용할 때 유용합니다. + +- **router.onError(callback)** + + > 2.4.0+ + +라우트 탐색 중에 에러가 발견되면 호출 될 콜백을 등록하십시오. 호출 할 에러에 유의하십시오. 에러는 다음 시나리오 중 하나이어야합니다. + + - 에러는 라우트 가드 기능 내에서 동기적으로 발생한 경우. + - 에러는 라우트 가드 함수 내에서 `next(err)`를 호출하여 캐치한 경우 + - 라우트를 렌더링하는데 필요한 비동기 컴포넌트를 처리하려고 할 때 에러가 발생한 경우. diff --git a/docs/kr/api/router-link.md b/docs/kr/api/router-link.md index 367ae594f..68ec19c46 100644 --- a/docs/kr/api/router-link.md +++ b/docs/kr/api/router-link.md @@ -115,6 +115,15 @@ 링크 네비게이션을 트리거 할 수있는 이벤트를 지정합니다. +- **exact-active-class** + + > 2.5.0+ + - 자료형: `string` + - 기본값: `"router-link-exact-active"` + + 정확하게 일치하는 링크가 활성된 상태일 때 적용되는 CSS 클래스를 지정합니다. 기본값은`linkExactActiveClass` 라우터 생성자 옵션을 통해 전역으로 설정 될 수 있습니다. + + ### 외부 엘리먼트에 active 클래스 적용하기 때로 우리는 active 클래스가 `` 태그 자체가 아닌 외부 엘리먼트에 적용되는 것을 원할 수 있습니다. 이 경우 `` 를 사용하여 외부 엘리먼트를 렌더링하고 원시 ``는 내부에 작성합니다. diff --git a/docs/kr/essentials/dynamic-matching.md b/docs/kr/essentials/dynamic-matching.md index 091f6f1fe..b7c6fe12d 100644 --- a/docs/kr/essentials/dynamic-matching.md +++ b/docs/kr/essentials/dynamic-matching.md @@ -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)를 확인하십시오. diff --git a/docs/kr/essentials/navigation.md b/docs/kr/essentials/navigation.md index 636f40a20..a1e9d083d 100644 --- a/docs/kr/essentials/navigation.md +++ b/docs/kr/essentials/navigation.md @@ -4,6 +4,8 @@ #### `router.push(location, onComplete?, onAbort?)` +**참고: Vue 인스턴스 내부에서 라우터 인스턴스에 `$router`로 액세스 할 수 있습니다. 그러므로`this.$router.push`를 사용 할 수 있습니다.** + 다른 URL로 이동하려면 `router.push`를 사용하십시오. 이 메소드는 새로운 항목을 히스토리 스택에 넣기 때문에 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 URL로 이동하게된다. 이것은 ``를 클릭 할 때 내부적으로 호출되는 메소드이므로 ``를 클릭하면 `router.push(...)`를 호출하는 것과 같습니다. From 835b68beaf23d8b9fbedce6273dee8fa85368892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?ChangJoo=20Park=28=EB=B0=95=EC=B0=BD=EC=A3=BC=29?= Date: Wed, 26 Apr 2017 22:14:06 +0900 Subject: [PATCH 2/2] [Korean] remove english Global Resolve Guards Global Resolve Guards and Global After Hooks headings are not need to translate in Korean. It is make sense in English than Korean --- docs/kr/advanced/navigation-guards.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/kr/advanced/navigation-guards.md b/docs/kr/advanced/navigation-guards.md index c19933eaf..8f0153982 100644 --- a/docs/kr/advanced/navigation-guards.md +++ b/docs/kr/advanced/navigation-guards.md @@ -41,7 +41,6 @@ router.beforeEach((to, from, next) => { > 2.5.0에서 추가됨 -In 2.5.0+ you can register a global guard with `router.onResolve`. This is similar to `router.beforeEach`, with the difference that resolve guards will be called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**. 2.5.0 이후로 `router.onResolve`를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 `router.beforeEach`와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다 ### Global After Hooks @@ -124,4 +123,4 @@ beforeRouteEnter (to, from, next) { 9. 네비게이션 완료. 10. 전역 `afterEach` 훅 호출 11. DOM 갱신 트리거 됨 -12. 인스턴스화 된 인스턴스들의 `beforeRouteEnter`가드에서 `next`에 전달 된 콜백을 호출합니다 \ No newline at end of file +12. 인스턴스화 된 인스턴스들의 `beforeRouteEnter`가드에서 `next`에 전달 된 콜백을 호출합니다