Skip to content

Commit 7283ae2

Browse files
authored
Update ja docs (#1412)
* translate beforeResolve hook related docs NOTE: pick up from c4ff27a * additional translation NOTE: pick up from 26c0f16 * translate api/router-instance section NOTE: pick up from 7ca6897 * add exact-active-class * translate previous commit * improve tones of sentence * fix typo NOTE: pick up from 23991ef * update getting-started section NOTE: pick up from bce38f8 * fix some review comments
1 parent 280fd41 commit 7283ae2

File tree

7 files changed

+79
-23
lines changed

7 files changed

+79
-23
lines changed

docs/ja/advanced/data-fetching.md

+16-18
Original file line numberDiff line numberDiff line change
@@ -83,30 +83,28 @@ export default {
8383
},
8484
beforeRouteEnter (route, redirect, next) {
8585
getPost(route.params.id, (err, post) => {
86-
if (err) {
87-
// 何らかのグローバルエラーメッセージを表示する
88-
} else {
89-
next(vm => {
90-
vm.post = post
91-
})
92-
}
86+
next(vm => vm.setData(err, post))
9387
})
9488
},
9589
// コンポーネントが既にレンダリングされている際のルート変更時は
9690
// ロジックが少し異なります
97-
watch: {
98-
$route () {
99-
this.post = null
100-
getPost(this.$route.params.id, (err, post) => {
101-
if (err) {
102-
this.error = err.toString()
103-
} else {
104-
this.post = post
105-
}
106-
})
91+
beforeRouteUpdate (to, from, next) {
92+
this.post = null
93+
getPost(to.params.id, (err, post) => {
94+
this.setData(err, post)
95+
next()
96+
})
97+
},
98+
methods: {
99+
setData (err, post) {
100+
if (err) {
101+
this.error = err.toString()
102+
} else {
103+
this.post = post
104+
}
107105
}
108106
}
109107
}
110108
```
111109

112-
次に入ってくる view へのリソースを取得している間、ユーザーは現在の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。
110+
次に入ってくる view へのリソースを取得している間、ユーザーは前の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。

docs/ja/advanced/navigation-guards.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。
44

5-
**パラメータまたはクエリの変更はナビゲーションガードをトリガーしない** ということを覚えておいてください。単純にそれらの変更を対応するために [`$route` オブジェクトを監視します](../essentials/dynamic-matching.md#reacting-to-params-changes)
5+
**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます
66

77
### グローバルガード
88

@@ -34,6 +34,16 @@ router.beforeEach((to, from, next) => {
3434

3535
- **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。
3636

37+
**常に `next` 関数を呼び出すようにしてください。そうでなければ、フックは決して解決されません。**
38+
39+
### グローバル解決ガード
40+
41+
> New in 2.5.0
42+
43+
2.5.0 以降では、`router.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直前に解決ガードが呼び出されるという違いがあります。
44+
45+
### グローバルな After フック
46+
3747
グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは `next` 関数を受け取らず、ナビゲーションに影響しません。
3848

3949
``` js
@@ -106,3 +116,17 @@ beforeRouteEnter (to, from, next) {
106116
```
107117

108118
`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。
119+
120+
### 完全なナビゲーション解決フロー
121+
1. ナビゲーションがトリガされる
122+
2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ
123+
3. グローバル `beforeEach` ガードを呼ぶ
124+
4. 再利用されるコンポーネントで `beforeRouteUpdate` ガードを呼ぶ (2.2 以降)
125+
5. ルート設定内の `beforeEnter` を呼ぶ
126+
6. 非同期ルートコンポーネントを解決する
127+
7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ
128+
8. グローバル `beforeResolve` ガードを呼ぶ (2.5 以降)
129+
9. ナビゲーションが確定される
130+
10. グローバル `afterEach` フックを呼ぶ
131+
11. DOM 更新がトリガされる
132+
12. インスタンス化されたインスンタンスによって `beforeRouteEnter` ガードで `next` に渡されたコールバックを呼ぶ

docs/ja/api/options.md

+13-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
- `hash`: ルーティングに URL hash を使います。HTML5 History API をサポートしていないブラウザ含めて、全ての Vue がサポートしているブラウザで動作します。
3434

35-
- `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) をご参照ください
35+
- `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) を参照してください
3636

3737
- `abstract`: 全ての JavaScript の環境で動作します。 e.g. Node.js を使ったサーバーサイド。 **もしブラウザの API が存在しない場合、ルーターは自動的にこのモードに強制されます。**
3838

@@ -50,7 +50,17 @@
5050

5151
- デフォルト: `"router-link-active"`
5252

53-
グローバルに設定される `<router-link>` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) もご参照ください。
53+
グローバルに設定される `<router-link>` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) も参照してください。
54+
55+
### linkExactActiveClass
56+
57+
> 2.5.0+
58+
59+
- 型: `string`
60+
61+
- デフォルト: `"router-link-exact-active"`
62+
63+
完全一致に対してグローバルな `<router-link>` デフォルトアクティブクラスを設定します。[router-link](router-link.md) も参照してください。
5464

5565
### scrollBehavior
5666

@@ -66,7 +76,7 @@
6676
) => { x: number, y: number } | { selector: string } | ?{}
6777
```
6878

69-
より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) をご参照ください
79+
より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください
7080

7181
### parseQuery / stringifyQuery
7282

docs/ja/api/router-instance.md

+2
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@
2323
### メソッド
2424

2525
- **router.beforeEach(guard)**
26+
- **router.beforeResolve(guard)** (2.5.0+)
2627
- **router.afterEach(hook)**
2728

2829
グローバルなナビゲーションガードの追加。[ナビゲーションガード](../advanced/navigation-guards.md) をご参照ください。
2930

31+
2.5.0 以降では、3 つのメソッドすべてが、登録されたガード/フックを削除する関数を返します。
3032

3133
- **router.push(location, onComplete?, onAbort?)**
3234
- **router.replace(location, onComplete?, onAbort?)**

docs/ja/api/router-link.md

+10
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,16 @@
115115

116116
リンクナビゲーションをトリガーできるイベントを指定します。
117117

118+
- **exact-active-class**
119+
120+
> 2.5.0+
121+
122+
-`string`
123+
124+
- デフォルト: `"router-link-exact-active"`
125+
126+
完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。
127+
118128
### 外側の要素へのアクティブクラスの適用
119129

120130
アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `<router-link>` を使って外側の要素レンダリングして、その内側に生の `<a>` タグをラップすることができます。

docs/ja/essentials/dynamic-matching.md

+12
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,18 @@ const User = {
5353
}
5454
```
5555

56+
または、2.2 で導入された `beforeRouteUpdate` ガードを使用します:
57+
58+
``` js
59+
const User = {
60+
template: '...',
61+
beforeRouteUpdate (to, from, next) {
62+
// ルート変更に反応する...
63+
// next() を呼び出すのを忘れないでください
64+
}
65+
}
66+
```
67+
5668
### 高度なマッチングパターン
5769

5870
`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) をご参照ください。

docs/ja/essentials/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこでレンダリングするかを知らせるだけです。以下が基本的な例です。
66

7-
> すべての example では、vue のスタンドアロンバージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](http://jp.vuejs.org/v2/guide/installation.html#スタンドアロン-vs-ランタイム限定ビルド)を参照してください。
7+
> すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。
88
99
### HTML
1010

0 commit comments

Comments
 (0)