Skip to content

Commit 5e78f82

Browse files
committed
docs(ja): update pipeline/hooks.md (ref 29f833e)
1 parent 02e2bf8 commit 5e78f82

File tree

1 file changed

+37
-12
lines changed

1 file changed

+37
-12
lines changed

docs/ja/pipeline/hooks.md

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,10 @@ Vue.component('hook-example', {
1717
route: {
1818
activate: function (transition) {
1919
console.log('hook-example activated!')
20-
transition.next()
2120
},
22-
deactivate: function (transition) {
23-
console.log('hook-example deactivated!')
24-
transition.next()
21+
canDeactivate: function (transition) {
22+
console.log('You are not allowed to leave.')
23+
transition.abort()
2524
}
2625
}
2726
})
@@ -51,21 +50,47 @@ Vue.component('hook-example', {
5150

5251
現状のトランジションをキャンセルして、代わりに別のターゲット route にリダイレクトします。
5352

54-
全てのトランジションフックはデフォルトで非同期に実行されます。トランジションの進行を通知するために、3つのオプションがあります:
53+
### フックの解決ルール
5554

56-
1. 明示的に `next``abort` または `redirect` のいずれかを呼び出します。
55+
トランジションフック内部で非同期なタスクを実行する必要がしばしばあります。トランジションは非同期フックが解決されるまで移行しません。ここでは、フックが解決済として検討が必要なとき、決定するためのルールがあります:
5756

58-
2. Promise を返します。詳細は以下で説明します
57+
1. フックが Promise を返す場合、Promise が解決されるとき、フックは解決済みになります。[詳細は以下を参照(フックで Promise を返す)](#フックで Promise を返す)してください
5958

60-
3. 検証フック (`canActivate``canDeactivate`) で、同期的に Boolean 値を返します。
59+
2. フックが Promise を返さず、任意の引数を予期しない場合、それは同期的に解決されます。例:
60+
61+
``` js
62+
route: {
63+
activate: function (/* ここに引数がない */) {
64+
// Promise を返さない限り、同期的に解決します
65+
}
66+
}
67+
```
68+
69+
3. フックが Promise を返さないが、引数 (`transition`) を予期する場合、その後、フックは、`transition.next()``transition.abort()` または `transition.redirect()` の 1 つが呼ばれるときだけ、解決済みになります。例:
70+
71+
``` js
72+
route: {
73+
activate: function (transition) {
74+
// 1 秒後解決
75+
// resolve after 1 second
76+
setTimeout(transition.next, 1000)
77+
}
78+
}
79+
```
80+
81+
4. `canActivate``canDeactivate` そして[グローバル beforeEach フック](../api/before-each.md)のような検証フックにおいて、フックが `transition` 引数を持つ場合でも、Boolean を返す値は、フックを同期的に解決します。
6182

6283
### フックで Promise を返す
6384

64-
トランジションフックで Promise を返すとき、`transition.next` は Promise が解決するときに呼び出されます。もし、Promise が検証フェーズの間で拒否された場合は、`transition.abort` を呼びます。もし、活性化フェーズの間で拒否された場合は、`transition.next` を呼びます。
85+
- トランジションフックで Promise を返すとき、`transition.next` は Promise がうまく解決するときに呼ばれます。
86+
87+
- Promise が検証フェーズ中に拒否されている場合は、`transition.abort` を呼びます。
88+
89+
- Promise が活性化フェーズ中に拒否されている場合は、`transition.next` を呼びます。
6590

66-
検証フック (`canActivate``canDeactivate`)で、もし Promise が偽となりうる値で解決される場合、トランジションを中止します
91+
- 検証フックに対して、Promise の解決値が偽となり得る値の場合、トランジションを中断します
6792

68-
もし、Promise がキャッチされていないエラーを拒否した場合は、ルーターを作成するとき `suppressTransitionError` オプションで抑制しない限りスローされます
93+
- 拒否された Promise がキャッチされていないエラーを持つ場合は、ルーターを作成するときに、`suppressTransitionError` オプションでそれを抑制しないかぎり、そのエラーがスローされます
6994

7095
**例:**
7196

@@ -112,6 +137,6 @@ route: {
112137
- `activate`
113138
- `deactivate`
114139

115-
... クラス拡張またはミックスインがマージされるまでの間、あなたのコンポーネントが route `data` フックを定義する場合は、route `data` フックも提供するミックスインを使用し、両方のフックが(ミックスインのフックが最初に呼ばれる)呼ばれて、全てのフックから解決されたデータはいっしょにマージされます。
140+
... クラス拡張またはミックスインがマージされるまでの間、あなたのコンポーネントが route `data` フックを定義する場合は、route `data` フックも提供するミックスインを使用し、両方のフックが(ミックスインのフックが最初に呼ばれる)呼ばれて、全てのフックから解決されたデータはいっしょにマージされます。
116141

117142
`canActivate``canDeactivate`、そして `canReuse` のような検証フックは、常に新しい値によって上書きされることに注意してください。

0 commit comments

Comments
 (0)