File tree Expand file tree Collapse file tree 11 files changed +39
-39
lines changed Expand file tree Collapse file tree 11 files changed +39
-39
lines changed Original file line number Diff line number Diff line change 2
2
3
3
route トランジションが正常に** 活性化フェーズに入る** とき、毎回呼び出されるグローバル after フック (global after hook) を追加します。
4
4
5
- このフックが唯一トランジションが検証されたという意味を表すときに、呼ぼれるのを注意してください 。すなわち、全ての ` canDeactivate ` と ` canActivate ` フックが正常に解決し、ブラウザ URL が更新されます。これは、全ての ` activate ` フックが解決されたことを保証しません。
5
+ このフックが唯一トランジションが検証されたという意味を表すときに、呼ばれるのを注意してください 。すなわち、全ての ` canDeactivate ` と ` canActivate ` フックが正常に解決し、ブラウザ URL が更新されます。これは、全ての ` activate ` フックが解決されたことを保証しません。
6
6
7
- 同じルーターにフックした後に複数のグローバルを追加できます 。これらのフックは作成の順序で同期的に呼ばれます。
7
+ 同じルーターに複数のグローバル after フックを追加できます 。これらのフックは作成の順序で同期的に呼ばれます。
8
8
9
9
### 引数
10
10
11
11
- ` hook {Function} `
12
12
13
- hook 関数は[ トランジションオブジェクト] ( ../pipeline/hooks.html#トランジションオブジェクト ) な単一の引数を受信します 。しかし、route オブジェクトは ` to ` と ` from ` プロパティ のみだけアクセスすることができます。フック後、グローバルではトランジションメソッドを呼び出すことは ** できません** 。
13
+ hook 関数は[ トランジションオブジェクト] ( ../pipeline/hooks.html#トランジションオブジェクト ) な単一の引数を受け取ります 。しかし、route オブジェクトは ` to ` と ` from ` プロパティ のみだけアクセスすることができます。グローバル after フックではトランジションメソッドを呼び出すことは ** できません** 。
14
14
15
15
### 戻り値
16
16
Original file line number Diff line number Diff line change 2
2
3
3
全ての route トランジションが開始する前に呼ばれるグローバル before フック (global before hook) をルーターに追加します。これは、トランジションパイプライン全体の前で、もし、フックがトランジションで拒否する場合、パイプラインは本当に開始されません。
4
4
5
- 同じルーターにフックする前に複数のグローバルを追加できます 。これらのフックは作成の順序で呼ばれます。フックは非同期に解決することができるため、前のものが解決されるまで次のフックは呼び出されません。
5
+ 同じルーターに複数のグローバル before フックを追加できます 。これらのフックは作成の順序で呼ばれます。フックは非同期に解決することができるため、前のものが解決されるまで次のフックは呼び出されません。
6
6
7
7
グローバル before フックは[ フックの解決ルール] ( ../pipeline/hooks.html#フックの解決ルール ) と同じように解決されます。
8
8
Original file line number Diff line number Diff line change 29
29
30
30
` name ` オブジェクトフォーマットについての詳細は、[ Named Routes] ( ../named.md ) を参照してください。
31
31
32
- - ` path ` フォーマットを使用して早退パスにナビゲートしているとき 、相対パスがいつも現在のパスに** 追加される** ため 、` append: true ` オプションに渡すことができます。例えば:
32
+ - ` path ` フォーマットを使用して相対パスにナビゲートしているとき 、相対パスがいつも現在のパスに** 追加される** ように 、` append: true ` オプションに渡すことができます。例えば:
33
33
34
34
- ` append: true ` オプションなしで ` /a ` から ` b ` への移動は、` /b ` に着きます
35
35
Original file line number Diff line number Diff line change 6
6
7
7
- 型: ` Vue `
8
8
9
- root Vue インスタンスはルーターインスタンスによって管理されます。このインスタンスは ` router.start() ` に渡した Vue コンポーネントのコンストラクタから作成されます。ルーターがロード時にリダイレクトを実行しなければならない場合のとき 、同期的に利用できない場合があります。あなたのアプリケーションのコンポーネントの外部で ` router.app ` にアクセスする必要がある場合、` router.start() ` に渡されたコールバック内部でそうすることができることに注意してください 。
9
+ root Vue インスタンスはルーターインスタンスによって管理されます。このインスタンスは ` router.start() ` に渡した Vue コンポーネントのコンストラクタから作成されます。ルーターがロード時にリダイレクトを実行しなければならない時 、同期的に利用できない場合があります。あなたのアプリケーションのコンポーネントの外部で ` router.app ` にアクセスする必要がある場合、` router.start() ` に渡されたコールバック内部でそうすることができます 。
10
10
11
11
### ` router.mode `
12
12
Original file line number Diff line number Diff line change 2
2
3
3
ルーターが使用可能なアプリケーションを開始します。` App ` のインスタンスを作成し、それを ` el ` にマウントします。
4
4
5
- ** Note:**
6
- vue-router は Vue インスタンスで開始することはできません。
7
-
8
5
### 引数
9
6
10
7
- ` App: Function | Object `
11
8
12
9
` App ` は Vue コンポーネントのコンストラクタ または コンポーネントオプションオブジェクトです。 もしオブジェクトの場合は、ルーターは暗黙的に ` Vue.extend ` を呼び出します。このコンポーネントはアプリケーションの root な Vue インスタンスを作成するために使用されます。
13
10
11
+ ** Note:**
12
+ vue-router は Vue インスタンスで開始することはできません。
13
+
14
14
- ` el: String | Element `
15
15
16
16
要素はアプリケーション上にマウントします。CSS セレクタ文字列または実際の要素を指定することができます。
Original file line number Diff line number Diff line change 1
1
# 基本的な使い方
2
2
3
- Vue.js + vue-router でシングルページアプリケーションを作成するのは極めてシンプルです。Vue.js で、既にコンポーネントに我々のアプリケーションを分割しています 。ミックスするため vue-router を追加する時、全ての我々のコンポーネントを routes に変換し 、そして、vue-router がそれらをレンダリングするのを知らせたりする必要があります 。ここでは基本的な例を示します:
3
+ Vue.js + vue-router でシングルページアプリケーションを作成するのは極めてシンプルです。Vue.js で、既に我々のアプリケーションはコンポーネントに分割されています 。ミックスするため vue-router を追加する時、必要なことは我々のコンポーネントを routes にマップし 、そして、vue-router にどこをレンダリングするのかを知らせたるだけです 。ここでは基本的な例を示します:
4
4
5
5
### HTML
6
6
@@ -57,7 +57,7 @@ router.map({
57
57
router .start (App, ' #app' )
58
58
```
59
59
60
- [ live] ( http://jsfiddle.net/yyx990803/xyu276sa/ ) の例もチェックアウトできます 。
60
+ [ live] ( http://jsfiddle.net/yyx990803/xyu276sa/ ) の例もチェックできます 。
61
61
62
62
加えて:
63
63
Original file line number Diff line number Diff line change @@ -26,9 +26,9 @@ Vue.use(VueRouter)
26
26
27
27
スタンドアロンビルドを使用しているときは、それ自身自動的にインストールされるため、これを実行する必要はありません。
28
28
29
- ### Dev ブランチ
29
+ ### Dev ビルド
30
30
31
- 最新の開発版を使用シたい場合は 、GitHub から直接 clone して ` vue-router ` をあなた自身でビルドしなければなりません。
31
+ 最新の開発版を使用したい場合は 、GitHub から直接 clone して ` vue-router ` をあなた自身でビルドしなければなりません。
32
32
33
33
``` bash
34
34
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
Original file line number Diff line number Diff line change @@ -33,7 +33,7 @@ var Foo = Vue.extend({
33
33
})
34
34
```
35
35
36
- このネストされた outlet でコンポーネントをレンダリングするため、我々の route 設定を更新する必要あります :
36
+ このネストされた outlet でコンポーネントをレンダリングするため、我々の route 設定を更新する必要があります :
37
37
38
38
``` js
39
39
router .map ({
@@ -55,7 +55,7 @@ router.map({
55
55
})
56
56
```
57
57
58
- 今、上記設定で、` /foo ` にアクセスするとき、サブ route がマッチされないため、` Foo ` の outlet 内部では何もレンダリングされません。恐らく、そこに何かレンダリングしたいです 。このようなケースは、このケースの ` / ` サブ route 提供することができます。
58
+ 今、上記設定で、` /foo ` にアクセスするとき、サブ route がマッチされないため、` Foo ` の outlet 内部では何もレンダリングされません。恐らく、そこに何かレンダリングしたいでしょう 。このようなケースは、このケースの ` / ` サブ route 提供することができます。
59
59
60
60
``` js
61
61
router .map ({
@@ -76,4 +76,4 @@ router.map({
76
76
})
77
77
```
78
78
79
- この例の動作デモは[ ここ] ( http://jsfiddle.net/yyx990803/naeg67da/ ) で見つけることができます 。
79
+ この例の動作デモは[ ここ] ( http://jsfiddle.net/yyx990803/naeg67da/ ) で見ることができます 。
Original file line number Diff line number Diff line change @@ -12,13 +12,13 @@ route トランジションのパイプラインをよく理解するために
12
12
13
13
1 . 潜在的にコンポーネント A を再利用することができます。なぜなら、トランジション後のコンポーネントツリーは同じであるためです。
14
14
15
- 2 . 非活性化し、そしてコンポーネント B と C を削除する必要があります。
15
+ 2 . コンポーネント B と C を非活性化し、削除する必要があります。
16
16
17
- 3 . 作成し、 コンポーネント D と E を活性化する必要があります 。
17
+ 3 . コンポーネント D と E を作成し、活性化する必要があります 。
18
18
19
19
4 . ステップ2 とステップ3 を実際に実行する前に、このトランジションが有効であることを確認したい、つまり、必要に応じてこのトランジションが deactivated/activated ** できる** ことを全てのコンポーネントが関与していることを確認したいです。
20
20
21
- vue-router で、任意のトランジションフックで実装することによってこれらのステップを制御することができます。しかし、どうやってそれをするのか詳細に入る前に、大きな画像を見てみましょう 。
21
+ vue-router で、任意のトランジションフックで実装することによってこれらのステップを制御することができます。しかし、どうやってそれをするのか詳細に入る前に、広い視野で見てみましょう 。
22
22
23
23
### トランジションフェーズ
24
24
@@ -32,7 +32,7 @@ vue-router で、任意のトランジションフックで実装することに
32
32
33
33
2 . ** 検証フェーズ (Validation phase):**
34
34
35
- 全て現状のコンポーネントが非活性化できるかどうかチェックし、全ての新しいコンポーネントを活性化できます 。これは、` canDeactivate ` と ` canActivate ` の route 設定のフックを呼び出しとチェックで可能です 。
35
+ 全て現状のコンポーネントが非活性化できるかどうかチェックし、同様に全ての新しいコンポーネントが活性化できるかチェックします 。これは、` canDeactivate ` と ` canActivate ` の route 設定のフックを呼び出すことでチェック可能です 。
36
36
37
37
![ 検証フェーズ(validation phase)] ( 04.png )
38
38
Original file line number Diff line number Diff line change @@ -58,25 +58,25 @@ Vue.component('hook-example', {
58
58
59
59
2 . フックが Promise を返さず、任意の引数を予期しない場合、それは同期的に解決されます。例:
60
60
61
- ``` js
62
- route: {
63
- activate : function (/* ここに引数がない */ ) {
64
- // Promise を返さない限り、同期的に解決します
65
- }
66
- }
67
- ```
61
+ ``` js
62
+ route: {
63
+ activate : function (/* ここに引数がない */ ) {
64
+ // Promise を返さない限り、同期的に解決します
65
+ }
66
+ }
67
+ ```
68
68
69
69
3 . フックが Promise を返さないが、引数 (` transition ` ) を予期する場合、その後、フックは、` transition.next() ` 、` transition.abort() ` または ` transition.redirect() ` の 1 つが呼ばれるときだけ、解決済みになります。例:
70
70
71
- ``` js
72
- route: {
73
- activate : function (transition ) {
74
- // 1 秒後解決
75
- // resolve after 1 second
76
- setTimeout (transition .next , 1000 )
77
- }
78
- }
79
- ```
71
+ ``` js
72
+ route: {
73
+ activate : function (transition ) {
74
+ // 1 秒後解決
75
+ // resolve after 1 second
76
+ setTimeout (transition .next , 1000 )
77
+ }
78
+ }
79
+ ```
80
80
81
81
4 . ` canActivate ` 、` canDeactivate ` そして[ グローバル beforeEach フック] ( ../api/before-each.md ) のような検証フックにおいて、フックが ` transition ` 引数を持つ場合でも、Boolean を返す値は、フックを同期的に解決します。
82
82
You can’t perform that action at this time.
0 commit comments