|
1 |
| -# Transition Pipeline |
| 1 | +# トランジションパイプライン |
2 | 2 |
|
3 |
| -To better understand the pipeline of a route transition, let's imagine we have a router-enabled app, already rendered with three nested `<router-view>` with the path `/a/b/c`: |
| 3 | +route トランジションのパイプラインをよく理解するために、パス `/a/b/c` によって3つネストされて `<router-view>` で既にレンダリングされた、ルーターが使用可能なアプリケーションをイメージしてみましょう: |
4 | 4 |
|
5 | 5 | 
|
6 | 6 |
|
7 |
| -And then, the user navigates to a new path, `/a/d/e`, which requires us to update our rendered component tree to a new one: |
| 7 | +そして、私達のレンダリングされたコンポーネントツリーを新しいものに更新することを必要とする新しいパス `/a/d/e` にナビゲートします: |
8 | 8 |
|
9 | 9 | 
|
10 | 10 |
|
11 |
| -How would we go about that? There are a few things we need to do here: |
| 11 | +どうやって私達はそれについて行けるでしょうか?私達はここでする必要があるいくつかの事があります: |
12 | 12 |
|
13 |
| -1. We can potentially reuse component A, because it remains the same in the post-transition component tree. |
| 13 | +1. 潜在的にコンポーネント A を再利用することができます。なぜなら、トランジション後のコンポーネントツリーは同じであるためです。 |
14 | 14 |
|
15 |
| -2. We need to deactivate and remove component B and C. |
| 15 | +2. 非活性化化し、そしてコンポーネント B と C を削除する必要があります。 |
16 | 16 |
|
17 |
| -3. We need to create and activate component D and E. |
| 17 | +3. 作成し、コンポーネント D と E を活性化する必要があります。 |
18 | 18 |
|
19 |
| -4. Before we actually perform step 2 & 3, we also want to make sure this transition is valid - that is, to make sure that all components involved in this transition **can** be deactivated/activated as desired. |
| 19 | +4. ステップ2 とステップ3 を実際に実行する前に、このトランジションが有効であることを確認したい、つまり、必要に応じてこのトランジションが deactivated/activated **できる** ことを全てのコンポーネントが関与していることを確認したいです。 |
20 | 20 |
|
21 |
| -With vue-router, you can control these steps by implementing optional transition hooks. But before we go into details on how to do that, let's take a look at the bigger picture. |
| 21 | +vue-router で、任意のトランジションフックで実装することによってこれらのステップを制御することができます。しかし、どうやってそれをするのか詳細に入る前に、大きな画像を見てみましょう。 |
22 | 22 |
|
23 |
| -### Transition Phases |
| 23 | +### トランジションフェーズ |
24 | 24 |
|
25 |
| -We can divide a route transition pipeline into three phases: |
| 25 | +3つのフェーズで route のトランジションパイプラインを分けることができます: |
26 | 26 |
|
27 |
| -1. **Reusability phase:** |
| 27 | +1. **再利用性フェーズ (Reusability phase):** |
28 | 28 |
|
29 |
| - Check if any component in the current view hierarchy can be reused in the new one. This is done by comparing the two component trees, find out common components, and then check their reusability (via the `canReuse` option). By default, every component is reusable unless configured otherwise. |
| 29 | + 現状の view 階層内の全てのコンポーネントが、新しいものに再利用できるかどうかチェックします。これは2つのコンポーネントツリーを比較することによって行われます。共通のコンポーネントを見つけて、そしてそれからそれらの再利用性 (`canReuse` オプション経由) をチェックします。デフォルトでは、全てのコンポーネントは他の方法で設定しない限り再利用可能です。 |
30 | 30 |
|
31 |
| -  |
| 31 | +  |
32 | 32 |
|
33 |
| -2. **Validation phase:** |
| 33 | +2. **検証フェーズ (Validation phase):** |
34 | 34 |
|
35 |
| - Check if all current components can be deactivated, and if all new components can be activated. This is by checking and calling their `canDeactivate` and `canActivate` route config hooks. |
| 35 | + 全て現状のコンポーネントが非活性化できるかどうかチェックし、全ての新しいコンポーネントが活性化できます。これは、`canDeactivate` と `canActivate` の route 設定のフックを呼び出しとチェックで可能です。 |
36 | 36 |
|
37 |
| -  |
| 37 | +  |
38 | 38 |
|
39 |
| - Note the `canDeactivate` check bubbles bottom-up, while the `canActivate` check is top-down. |
| 39 | + `canActivate` チェックはトップダウンですが、`canDeactivate` チェックはボトムアップなバブルであることに注意してください。 |
40 | 40 |
|
41 |
| - Any of these hooks can potentially abort the transition. If a transition is aborted during the validation phase, the router preserve current app state and restore the previous path. |
| 41 | + これらの全てのフックが潜在的にトランジションを中止することができます。もしトランジションが検証フェーズの間で中止される場合は、ルーターは現状のアプリケーション状態を保存し、前のパスを復元します。 |
42 | 42 |
|
43 |
| -3. **Activation phase:** |
| 43 | +3. **活性化フェーズ (Activation phase):** |
44 | 44 |
|
45 |
| - Once all validation hooks have been called and none of them aborts the transition, the transition is now said to be valid. The router will now deactivate current components and activate new components. |
| 45 | + 一度全ての検証フックが呼び出され、それらのトランジションの中止がない場合、トランジションは現在有効であると言われます。ルーターは現状のコンポーネントを非活性化し、新しいコンポーネントを活性化します。 |
46 | 46 |
|
47 |
| -  |
| 47 | +  |
48 | 48 |
|
49 |
| - These hooks are called in the same order of the validation hooks, but their purpose is to give you the chance to do cleanup / preparation work before the visible component switching is executed. The interface will not update until all of the affected components' `deactivate` and `activate` hooks have been resolved. |
| 49 | + これらのフックは検証フックの同じ順序で呼び出されますが、これらの目的は、目に見えるコンポーネントの切り替えが実行される前に、クリーンアップ/準備 作業をするための機会を与えるためです。インターフェイスは影響を受けるコンポーネントの `deactivate` フックと `activate` フックの全てが解決されるまで更新されません。 |
50 | 50 |
|
51 |
| - The `data` hook is called right after `activate` is resolved, and is also called when a component is reused. |
| 51 | + `data` フックは `activate` フックが解決された直後に呼び出され、コンポーネントが再利用されるときも呼び出されます。 |
52 | 52 |
|
53 |
| -We will talk about transition hooks in detail next. |
| 53 | +次の詳細では、トランジションフックについて話します。 |
0 commit comments