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..ea60a1122 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)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます。 ### グローバルガード @@ -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.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直前に解決ガードが呼び出されるという違いがあります。 + +### グローバルな After フック + グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは `next` 関数を受け取らず、ナビゲーションに影響しません。 ``` js @@ -106,3 +116,17 @@ beforeRouteEnter (to, from, next) { ``` `beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。 + +### 完全なナビゲーション解決フロー +1. ナビゲーションがトリガされる +2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ +3. グローバル `beforeEach` ガードを呼ぶ +4. 再利用されるコンポーネントで `beforeRouteUpdate` ガードを呼ぶ (2.2 以降) +5. ルート設定内の `beforeEnter` を呼ぶ +6. 非同期ルートコンポーネントを解決する +7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ +8. グローバル `beforeResolve` ガードを呼ぶ (2.5 以降) +9. ナビゲーションが確定される +10. グローバル `afterEach` フックを呼ぶ +11. DOM 更新がトリガされる +12. インスタンス化されたインスンタンスによって `beforeRouteEnter` ガードで `next` に渡されたコールバックを呼ぶ diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 56591043f..2a7b5d34f 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,17 @@ - デフォルト: `"router-link-active"` - グローバルに設定される `` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) もご参照ください。 + グローバルに設定される `` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) も参照してください。 + +### linkExactActiveClass + +> 2.5.0+ + +- 型: `string` + +- デフォルト: `"router-link-exact-active"` + + 完全一致に対してグローバルな `` デフォルトアクティブクラスを設定します。[router-link](router-link.md) も参照してください。 ### scrollBehavior @@ -66,7 +76,7 @@ ) => { x: number, y: number } | { selector: string } | ?{} ``` - より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) をご参照ください。 + より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 ### parseQuery / stringifyQuery diff --git a/docs/ja/api/router-instance.md b/docs/ja/api/router-instance.md index 02ace70f8..c449b1374 100644 --- a/docs/ja/api/router-instance.md +++ b/docs/ja/api/router-instance.md @@ -23,10 +23,12 @@ ### メソッド - **router.beforeEach(guard)** +- **router.beforeResolve(guard)** (2.5.0+) - **router.afterEach(hook)** グローバルなナビゲーションガードの追加。[ナビゲーションガード](../advanced/navigation-guards.md) をご参照ください。 + 2.5.0 以降では、3 つのメソッドすべてが、登録されたガード/フックを削除する関数を返します。 - **router.push(location, onComplete?, onAbort?)** - **router.replace(location, onComplete?, onAbort?)** diff --git a/docs/ja/api/router-link.md b/docs/ja/api/router-link.md index c9bcbf5b8..be0739482 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+ + + - 型 `string` + + - デフォルト: `"router-link-exact-active"` + + 完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。 + ### 外側の要素へのアクティブクラスの適用 アクティブクラスを `` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `` を使って外側の要素レンダリングして、その内側に生の `` タグをラップすることができます。 diff --git a/docs/ja/essentials/dynamic-matching.md b/docs/ja/essentials/dynamic-matching.md index 1ee4fa757..2ae0c9a05 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) をご参照ください。 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