From e16d9f9a8051eda49e43bcb2d2797ffde739b836 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:05:30 +0900 Subject: [PATCH 1/9] translate beforeResolve hook related docs NOTE: pick up from https://github.com/vuejs/vue-router/commit/c4ff27abb4ba7a0f8f99fcc63c5233c1bb26ecb3 --- docs/ja/advanced/data-fetching.md | 34 +++++++++++++-------------- docs/ja/advanced/navigation-guards.md | 26 +++++++++++++++++++- docs/ja/api/router-instance.md | 1 + 3 files changed, 42 insertions(+), 19 deletions(-) diff --git a/docs/ja/advanced/data-fetching.md b/docs/ja/advanced/data-fetching.md index f16b78573..8220db158 100644 --- a/docs/ja/advanced/data-fetching.md +++ b/docs/ja/advanced/data-fetching.md @@ -83,30 +83,28 @@ export default { }, beforeRouteEnter (route, redirect, next) { getPost(route.params.id, (err, post) => { - if (err) { - // 何らかのグローバルエラーメッセージを表示する - } else { - next(vm => { - vm.post = post - }) - } + next(vm => vm.setData(err, post)) }) }, // コンポーネントが既にレンダリングされている際のルート変更時は // ロジックが少し異なります - watch: { - $route () { - this.post = null - getPost(this.$route.params.id, (err, post) => { - if (err) { - this.error = err.toString() - } else { - this.post = post - } - }) + beforeRouteUpdate (to, from, next) { + this.post = null + getPost(to.params.id, (err, post) => { + this.setData(err, post) + next() + }) + }, + methods: { + setData (err, post) { + if (err) { + this.error = err.toString() + } else { + this.post = post + } } } } ``` -次に入ってくる view へのリソースを取得している間、ユーザーは現在の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。 +次に入ってくる view へのリソースを取得している間、ユーザーは前の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。 diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index 9fe7aaf86..c36d8a27a 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -2,7 +2,7 @@ この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 -**パラメータまたはクエリの変更はナビゲーションガードをトリガーしない** ということを覚えておいてください。単純にそれらの変更を対応するために [`$route` オブジェクトを監視します](../essentials/dynamic-matching.md#reacting-to-params-changes)。 +**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更を対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpadte` を使用するか、どちらかでできます。 ### グローバルガード @@ -34,6 +34,16 @@ router.beforeEach((to, from, next) => { - **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。 + **常に `next` 関数を呼び出すようにしてください。そうでなければ、フックは決して解決されません。** + +### グローバル解決ガード + +> New in 2.5.0 + +2.5.0 以降では、`router.onResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直ゼインに解決ガードが呼び出されるという違いがあります。 + +### グローバルな After フック + グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは `next` 関数を受け取らず、ナビゲーションに影響しません。 ``` js @@ -106,3 +116,17 @@ beforeRouteEnter (to, from, next) { ``` `beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。 + +### 完全なガード解決フロー +1. ナビゲーションがトリガされる +2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ +3. グローバル `beforeEach` ガードを呼ぶ +4. 再利用コンポーネント (2.2 以降) で `beforeRouteUpdate` ガードを呼ぶ +5. ルート設定 `beforeEnter` を呼ぶ +6. 非同期ルートコンポーネントを解決する +7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ +8. グローバル `beforeResolve` ガード (2.5 以降) を呼ぶ +9. ナビゲーションが確定される +10. グローバル `afterEach` フックを呼ぶ +11. DOM 更新がトリガされる +12. インスタンス化されたインスンタンスによって `beforeRouteEnter` ガードで `next` に渡されたコールバックを呼ぶ diff --git a/docs/ja/api/router-instance.md b/docs/ja/api/router-instance.md index 02ace70f8..a2d6a3f18 100644 --- a/docs/ja/api/router-instance.md +++ b/docs/ja/api/router-instance.md @@ -23,6 +23,7 @@ ### メソッド - **router.beforeEach(guard)** +- **router.beforeResolve(guard)** (2.5.0+) - **router.afterEach(hook)** グローバルなナビゲーションガードの追加。[ナビゲーションガード](../advanced/navigation-guards.md) をご参照ください。 From 2a0a492fe504e2d0f755bda8f2abcb4fcbb5a57d Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:16:46 +0900 Subject: [PATCH 2/9] additional translation NOTE: pick up from https://github.com/vuejs/vue-router/commit/26c0f16a62d8e8c87d0a141eb32b7622319d4f26 --- docs/ja/advanced/navigation-guards.md | 4 ++-- docs/ja/essentials/dynamic-matching.md | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index c36d8a27a..1e3532050 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => { > New in 2.5.0 -2.5.0 以降では、`router.onResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直ゼインに解決ガードが呼び出されるという違いがあります。 +2.5.0 以降では、`router.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直ゼインに解決ガードが呼び出されるという違いがあります。 ### グローバルな After フック @@ -117,7 +117,7 @@ beforeRouteEnter (to, from, next) { `beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。 -### 完全なガード解決フロー +### 完全なナビゲーション解決フロー 1. ナビゲーションがトリガされる 2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ 3. グローバル `beforeEach` ガードを呼ぶ diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md index 1ee4fa757..21f74fba5 100644 --- a/docs/ja/essentials/dynamic-matching.md +++ b/docs/ja/essentials/dynamic-matching.md @@ -53,6 +53,18 @@ const User = { } ``` +または、2.2 で導入された `beforeRouteUpdate` ガードを使用します: + +``` js +const User = { + template: '...', + beforeRouteUpdate (to, from, next) { + // ルート変更にリアクティブにする... + // next() を呼び出すのを忘れないでください + } +} +``` + ### 高度なマッチングパターン `vue-router` はパスのマッチングエンジンとして [path-to-regexp](https://github.com/pillarjs/path-to-regexp) を使っています。これは Optional による動的なセグメント、Zero or more / One or more に対する要求、また、カスタム正規表現パターンまでもサポートしています。 これらの高度なパターンについてはこちらの [ドキュメンテーション](https://github.com/pillarjs/path-to-regexp#parameters) または、 `vue-router` の中でそれらを使っている [こちらの例](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) をご参照ください。 From 1d31530b0f3c5e0bd09f3f47176aab02c013ff68 Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:20:42 +0900 Subject: [PATCH 3/9] translate api/router-instance section NOTE: pick up from https://github.com/vuejs/vue-router/commit/7ca68976f43f27fd4dcb25597d383d680e8757c4 --- docs/ja/api/router-instance.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/ja/api/router-instance.md b/docs/ja/api/router-instance.md index a2d6a3f18..c449b1374 100644 --- a/docs/ja/api/router-instance.md +++ b/docs/ja/api/router-instance.md @@ -28,6 +28,7 @@ グローバルなナビゲーションガードの追加。[ナビゲーションガード](../advanced/navigation-guards.md) をご参照ください。 + 2.5.0 以降では、3 つのメソッドすべてが、登録されたガード/フックを削除する関数を返します。 - **router.push(location, onComplete?, onAbort?)** - **router.replace(location, onComplete?, onAbort?)** From 7215f45f0cbba30e5c9d5a954c900b16b5b375d3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 24 Apr 2017 15:22:22 +0800 Subject: [PATCH 4/9] add exact-active-class --- docs/ja/api/options.md | 10 ++++++++++ docs/ja/api/router-link.md | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 56591043f..399ed925d 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -52,6 +52,16 @@ グローバルに設定される `` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) もご参照ください。 +### linkExactActiveClass + +> 2.5.0+ + +- type: `string` + +- default: `"router-link-exact-active"` + + Globally configure `` default active class for exact matches. Also see [router-link](router-link.md). + ### scrollBehavior - 型: `Function` diff --git a/docs/ja/api/router-link.md b/docs/ja/api/router-link.md index c9bcbf5b8..eaa763713 100644 --- a/docs/ja/api/router-link.md +++ b/docs/ja/api/router-link.md @@ -115,6 +115,16 @@ リンクナビゲーションをトリガーできるイベントを指定します。 +- **exact-active-class** + + > 2.5.0+ + + - type: `string` + + - default: `"router-link-exact-active"` + + Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option. + ### 外側の要素へのアクティブクラスの適用 アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `` を使って外側の要素レンダリングして、その内側に生の `` タグをラップすることができます。 From 9f4742c6b1bad3d54876a10dff8aa577f44d060c Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:29:52 +0900 Subject: [PATCH 5/9] translate previous commit --- docs/ja/api/options.md | 6 +++--- docs/ja/api/router-link.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 399ed925d..8d3c275ca 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -56,11 +56,11 @@ > 2.5.0+ -- type: `string` +- 型: `string` -- default: `"router-link-exact-active"` +- デフォルト: `"router-link-exact-active"` - Globally configure `` default active class for exact matches. Also see [router-link](router-link.md). + 完全一致に対してグローバルな `` デフォルトアクティブクラスを設定します。[router-link](router-link.md)も参照してください。 ### scrollBehavior diff --git a/docs/ja/api/router-link.md b/docs/ja/api/router-link.md index eaa763713..be0739482 100644 --- a/docs/ja/api/router-link.md +++ b/docs/ja/api/router-link.md @@ -119,11 +119,11 @@ > 2.5.0+ - - type: `string` + - 型 `string` - - default: `"router-link-exact-active"` + - デフォルト: `"router-link-exact-active"` - Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option. + 完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。 ### 外側の要素へのアクティブクラスの適用 From 711bd2ddc5610829416e155d771a1925cdada69b Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:31:47 +0900 Subject: [PATCH 6/9] improve tones of sentence --- docs/ja/api/options.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 8d3c275ca..cd0b728b4 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -32,7 +32,7 @@ - `hash`: ルーティングに URL hash を使います。HTML5 History API をサポートしていないブラウザ含めて、全ての Vue がサポートしているブラウザで動作します。 - - `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) をご参照ください。 + - `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) を参照してください。 - `abstract`: 全ての JavaScript の環境で動作します。 e.g. Node.js を使ったサーバーサイド。 **もしブラウザの API が存在しない場合、ルーターは自動的にこのモードに強制されます。** @@ -50,7 +50,7 @@ - デフォルト: `"router-link-active"` - グローバルに設定される `` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) もご参照ください。 + グローバルに設定される `` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) も参照してください。 ### linkExactActiveClass @@ -60,7 +60,7 @@ - デフォルト: `"router-link-exact-active"` - 完全一致に対してグローバルな `` デフォルトアクティブクラスを設定します。[router-link](router-link.md)も参照してください。 + 完全一致に対してグローバルな `` デフォルトアクティブクラスを設定します。[router-link](router-link.md) も参照してください。 ### scrollBehavior @@ -76,7 +76,7 @@ ) => { x: number, y: number } | { selector: string } | ?{} ``` - より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) をご参照ください。 + より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 ### parseQuery / stringifyQuery From ab5b241bf207d449ab0ecba8df9596890d88bf6f Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:34:11 +0900 Subject: [PATCH 7/9] fix typo NOTE: pick up from https://github.com/vuejs/vue-router/commit/23991ef6ed38038797d990e70671239d82960fb1 --- docs/ja/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index 1e3532050..872c8524d 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -2,7 +2,7 @@ この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 -**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更を対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpadte` を使用するか、どちらかでできます。 +**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更を対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するか、どちらかでできます。 ### グローバルガード From 9ff1b94fafe991e82a09258cf1428fa5081a900c Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 14 May 2017 23:38:12 +0900 Subject: [PATCH 8/9] update getting-started section NOTE: pick up from https://github.com/vuejs/vue-router/commit/bce38f89710612149d26215c110cfab113a67803 --- docs/ja/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ja/essentials/getting-started.md b/docs/ja/essentials/getting-started.md index 3f1a63c3b..94648e06d 100644 --- a/docs/ja/essentials/getting-started.md +++ b/docs/ja/essentials/getting-started.md @@ -4,7 +4,7 @@ Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこでレンダリングするかを知らせるだけです。以下が基本的な例です。 -> すべての example では、vue のスタンドアロンバージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](http://jp.vuejs.org/v2/guide/installation.html#スタンドアロン-vs-ランタイム限定ビルド)を参照してください。 +> すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。 ### HTML From 4f7bb9be8b4933ad3a7f58518422967f47284d2b Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Tue, 16 May 2017 23:34:30 +0900 Subject: [PATCH 9/9] fix some review comments --- docs/ja/advanced/navigation-guards.md | 10 +++++----- docs/ja/api/options.md | 2 +- docs/ja/essentials/dynamic-matching.md | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/ja/advanced/navigation-guards.md b/docs/ja/advanced/navigation-guards.md index 872c8524d..ea60a1122 100644 --- a/docs/ja/advanced/navigation-guards.md +++ b/docs/ja/advanced/navigation-guards.md @@ -2,7 +2,7 @@ この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 -**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更を対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するか、どちらかでできます。 +**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます。 ### グローバルガード @@ -40,7 +40,7 @@ router.beforeEach((to, from, next) => { > New in 2.5.0 -2.5.0 以降では、`router.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直ゼインに解決ガードが呼び出されるという違いがあります。 +2.5.0 以降では、`router.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直前に解決ガードが呼び出されるという違いがあります。 ### グローバルな After フック @@ -121,11 +121,11 @@ beforeRouteEnter (to, from, next) { 1. ナビゲーションがトリガされる 2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ 3. グローバル `beforeEach` ガードを呼ぶ -4. 再利用コンポーネント (2.2 以降) で `beforeRouteUpdate` ガードを呼ぶ -5. ルート設定 `beforeEnter` を呼ぶ +4. 再利用されるコンポーネントで `beforeRouteUpdate` ガードを呼ぶ (2.2 以降) +5. ルート設定内の `beforeEnter` を呼ぶ 6. 非同期ルートコンポーネントを解決する 7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ -8. グローバル `beforeResolve` ガード (2.5 以降) を呼ぶ +8. グローバル `beforeResolve` ガードを呼ぶ (2.5 以降) 9. ナビゲーションが確定される 10. グローバル `afterEach` フックを呼ぶ 11. DOM 更新がトリガされる diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index cd0b728b4..2a7b5d34f 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -76,7 +76,7 @@ ) => { x: number, y: number } | { selector: string } | ?{} ``` - より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 + より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 ### parseQuery / stringifyQuery diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md index 21f74fba5..2ae0c9a05 100644 --- a/docs/ja/essentials/dynamic-matching.md +++ b/docs/ja/essentials/dynamic-matching.md @@ -59,7 +59,7 @@ const User = { const User = { template: '...', beforeRouteUpdate (to, from, next) { - // ルート変更にリアクティブにする... + // ルート変更に反応する... // next() を呼び出すのを忘れないでください } }