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 22
33route トランジションが正常に** 活性化フェーズに入る** とき、毎回呼び出されるグローバル after フック (global after hook) を追加します。
44
5- このフックが唯一トランジションが検証されたという意味を表すときに、呼ぼれるのを注意してください 。すなわち、全ての ` canDeactivate ` と ` canActivate ` フックが正常に解決し、ブラウザ URL が更新されます。これは、全ての ` activate ` フックが解決されたことを保証しません。
5+ このフックが唯一トランジションが検証されたという意味を表すときに、呼ばれるのを注意してください 。すなわち、全ての ` canDeactivate ` と ` canActivate ` フックが正常に解決し、ブラウザ URL が更新されます。これは、全ての ` activate ` フックが解決されたことを保証しません。
66
7- 同じルーターにフックした後に複数のグローバルを追加できます 。これらのフックは作成の順序で同期的に呼ばれます。
7+ 同じルーターに複数のグローバル after フックを追加できます 。これらのフックは作成の順序で同期的に呼ばれます。
88
99### 引数
1010
1111- ` hook {Function} `
1212
13- hook 関数は[ トランジションオブジェクト] ( ../pipeline/hooks.html#トランジションオブジェクト ) な単一の引数を受信します 。しかし、route オブジェクトは ` to ` と ` from ` プロパティ のみだけアクセスすることができます。フック後、グローバルではトランジションメソッドを呼び出すことは ** できません** 。
13+ hook 関数は[ トランジションオブジェクト] ( ../pipeline/hooks.html#トランジションオブジェクト ) な単一の引数を受け取ります 。しかし、route オブジェクトは ` to ` と ` from ` プロパティ のみだけアクセスすることができます。グローバル after フックではトランジションメソッドを呼び出すことは ** できません** 。
1414
1515### 戻り値
1616
Original file line number Diff line number Diff line change 22
33全ての route トランジションが開始する前に呼ばれるグローバル before フック (global before hook) をルーターに追加します。これは、トランジションパイプライン全体の前で、もし、フックがトランジションで拒否する場合、パイプラインは本当に開始されません。
44
5- 同じルーターにフックする前に複数のグローバルを追加できます 。これらのフックは作成の順序で呼ばれます。フックは非同期に解決することができるため、前のものが解決されるまで次のフックは呼び出されません。
5+ 同じルーターに複数のグローバル before フックを追加できます 。これらのフックは作成の順序で呼ばれます。フックは非同期に解決することができるため、前のものが解決されるまで次のフックは呼び出されません。
66
77グローバル before フックは[ フックの解決ルール] ( ../pipeline/hooks.html#フックの解決ルール ) と同じように解決されます。
88
Original file line number Diff line number Diff line change 2929
3030 ` name ` オブジェクトフォーマットについての詳細は、[ Named Routes] ( ../named.md ) を参照してください。
3131
32- - ` path ` フォーマットを使用して早退パスにナビゲートしているとき 、相対パスがいつも現在のパスに** 追加される** ため 、` append: true ` オプションに渡すことができます。例えば:
32+ - ` path ` フォーマットを使用して相対パスにナビゲートしているとき 、相対パスがいつも現在のパスに** 追加される** ように 、` append: true ` オプションに渡すことができます。例えば:
3333
3434 - ` append: true ` オプションなしで ` /a ` から ` b ` への移動は、` /b ` に着きます
3535
Original file line number Diff line number Diff line change 66
77- 型: ` Vue `
88
9- root Vue インスタンスはルーターインスタンスによって管理されます。このインスタンスは ` router.start() ` に渡した Vue コンポーネントのコンストラクタから作成されます。ルーターがロード時にリダイレクトを実行しなければならない場合のとき 、同期的に利用できない場合があります。あなたのアプリケーションのコンポーネントの外部で ` router.app ` にアクセスする必要がある場合、` router.start() ` に渡されたコールバック内部でそうすることができることに注意してください 。
9+ root Vue インスタンスはルーターインスタンスによって管理されます。このインスタンスは ` router.start() ` に渡した Vue コンポーネントのコンストラクタから作成されます。ルーターがロード時にリダイレクトを実行しなければならない時 、同期的に利用できない場合があります。あなたのアプリケーションのコンポーネントの外部で ` router.app ` にアクセスする必要がある場合、` router.start() ` に渡されたコールバック内部でそうすることができます 。
1010
1111### ` router.mode `
1212
Original file line number Diff line number Diff line change 22
33ルーターが使用可能なアプリケーションを開始します。` App ` のインスタンスを作成し、それを ` el ` にマウントします。
44
5- ** Note:**
6- vue-router は Vue インスタンスで開始することはできません。
7-
85### 引数
96
107- ` App: Function | Object `
118
129 ` App ` は Vue コンポーネントのコンストラクタ または コンポーネントオプションオブジェクトです。 もしオブジェクトの場合は、ルーターは暗黙的に ` Vue.extend ` を呼び出します。このコンポーネントはアプリケーションの root な Vue インスタンスを作成するために使用されます。
1310
11+ ** Note:**
12+ vue-router は Vue インスタンスで開始することはできません。
13+
1414- ` el: String | Element `
1515
1616 要素はアプリケーション上にマウントします。CSS セレクタ文字列または実際の要素を指定することができます。
Original file line number Diff line number Diff line change 11# 基本的な使い方
22
3- Vue.js + vue-router でシングルページアプリケーションを作成するのは極めてシンプルです。Vue.js で、既にコンポーネントに我々のアプリケーションを分割しています 。ミックスするため vue-router を追加する時、全ての我々のコンポーネントを routes に変換し 、そして、vue-router がそれらをレンダリングするのを知らせたりする必要があります 。ここでは基本的な例を示します:
3+ Vue.js + vue-router でシングルページアプリケーションを作成するのは極めてシンプルです。Vue.js で、既に我々のアプリケーションはコンポーネントに分割されています 。ミックスするため vue-router を追加する時、必要なことは我々のコンポーネントを routes にマップし 、そして、vue-router にどこをレンダリングするのかを知らせたるだけです 。ここでは基本的な例を示します:
44
55### HTML
66
@@ -57,7 +57,7 @@ router.map({
5757router .start (App, ' #app' )
5858```
5959
60- [ live] ( http://jsfiddle.net/yyx990803/xyu276sa/ ) の例もチェックアウトできます 。
60+ [ live] ( http://jsfiddle.net/yyx990803/xyu276sa/ ) の例もチェックできます 。
6161
6262加えて:
6363
Original file line number Diff line number Diff line change @@ -26,9 +26,9 @@ Vue.use(VueRouter)
2626
2727スタンドアロンビルドを使用しているときは、それ自身自動的にインストールされるため、これを実行する必要はありません。
2828
29- ### Dev ブランチ
29+ ### Dev ビルド
3030
31- 最新の開発版を使用シたい場合は 、GitHub から直接 clone して ` vue-router ` をあなた自身でビルドしなければなりません。
31+ 最新の開発版を使用したい場合は 、GitHub から直接 clone して ` vue-router ` をあなた自身でビルドしなければなりません。
3232
3333``` bash
3434git 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({
3333})
3434```
3535
36- このネストされた outlet でコンポーネントをレンダリングするため、我々の route 設定を更新する必要あります :
36+ このネストされた outlet でコンポーネントをレンダリングするため、我々の route 設定を更新する必要があります :
3737
3838``` js
3939router .map ({
@@ -55,7 +55,7 @@ router.map({
5555})
5656```
5757
58- 今、上記設定で、` /foo ` にアクセスするとき、サブ route がマッチされないため、` Foo ` の outlet 内部では何もレンダリングされません。恐らく、そこに何かレンダリングしたいです 。このようなケースは、このケースの ` / ` サブ route 提供することができます。
58+ 今、上記設定で、` /foo ` にアクセスするとき、サブ route がマッチされないため、` Foo ` の outlet 内部では何もレンダリングされません。恐らく、そこに何かレンダリングしたいでしょう 。このようなケースは、このケースの ` / ` サブ route 提供することができます。
5959
6060``` js
6161router .map ({
@@ -76,4 +76,4 @@ router.map({
7676})
7777```
7878
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 トランジションのパイプラインをよく理解するために
1212
13131 . 潜在的にコンポーネント A を再利用することができます。なぜなら、トランジション後のコンポーネントツリーは同じであるためです。
1414
15- 2 . 非活性化し、そしてコンポーネント B と C を削除する必要があります。
15+ 2 . コンポーネント B と C を非活性化し、削除する必要があります。
1616
17- 3 . 作成し、 コンポーネント D と E を活性化する必要があります 。
17+ 3 . コンポーネント D と E を作成し、活性化する必要があります 。
1818
19194 . ステップ2 とステップ3 を実際に実行する前に、このトランジションが有効であることを確認したい、つまり、必要に応じてこのトランジションが deactivated/activated ** できる** ことを全てのコンポーネントが関与していることを確認したいです。
2020
21- vue-router で、任意のトランジションフックで実装することによってこれらのステップを制御することができます。しかし、どうやってそれをするのか詳細に入る前に、大きな画像を見てみましょう 。
21+ vue-router で、任意のトランジションフックで実装することによってこれらのステップを制御することができます。しかし、どうやってそれをするのか詳細に入る前に、広い視野で見てみましょう 。
2222
2323### トランジションフェーズ
2424
@@ -32,7 +32,7 @@ vue-router で、任意のトランジションフックで実装することに
3232
33332 . ** 検証フェーズ (Validation phase):**
3434
35- 全て現状のコンポーネントが非活性化できるかどうかチェックし、全ての新しいコンポーネントを活性化できます 。これは、` canDeactivate ` と ` canActivate ` の route 設定のフックを呼び出しとチェックで可能です 。
35+ 全て現状のコンポーネントが非活性化できるかどうかチェックし、同様に全ての新しいコンポーネントが活性化できるかチェックします 。これは、` canDeactivate ` と ` canActivate ` の route 設定のフックを呼び出すことでチェック可能です 。
3636
3737 ![ 検証フェーズ(validation phase)] ( 04.png )
3838
Original file line number Diff line number Diff line change @@ -58,25 +58,25 @@ Vue.component('hook-example', {
5858
59592 . フックが Promise を返さず、任意の引数を予期しない場合、それは同期的に解決されます。例:
6060
61- ``` js
62- route: {
63- activate : function (/* ここに引数がない */ ) {
64- // Promise を返さない限り、同期的に解決します
65- }
66- }
67- ```
61+ ``` js
62+ route: {
63+ activate : function (/* ここに引数がない */ ) {
64+ // Promise を返さない限り、同期的に解決します
65+ }
66+ }
67+ ```
6868
69693 . フックが Promise を返さないが、引数 (` transition ` ) を予期する場合、その後、フックは、` transition.next() ` 、` transition.abort() ` または ` transition.redirect() ` の 1 つが呼ばれるときだけ、解決済みになります。例:
7070
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+ ```
8080
81814 . ` canActivate ` 、` canDeactivate ` そして[ グローバル beforeEach フック] ( ../api/before-each.md ) のような検証フックにおいて、フックが ` transition ` 引数を持つ場合でも、Boolean を返す値は、フックを同期的に解決します。
8282
You can’t perform that action at this time.
0 commit comments