File tree Expand file tree Collapse file tree 7 files changed +111
-10
lines changed Expand file tree Collapse file tree 7 files changed +111
-10
lines changed Original file line number Diff line number Diff line change 13
13
- [ 名前付きルート] ( essentials/named-routes.md )
14
14
- [ 名前付きビュー] ( essentials/named-views.md )
15
15
- [ リダイレクトとエイリアス] ( essentials/redirect-and-alias.md )
16
+ - [ ルートコンポーネントにプロパティを渡す] ( essentials/passing-props.md )
16
17
- [ HTML5 History モード] ( essentials/history-mode.md )
17
18
- 高度な使い方
18
19
- [ ナビゲーションガード] ( advanced/navigation-guards.md )
25
26
- [ router-link] ( api/router-link.md )
26
27
- [ router-view] ( api/router-view.md )
27
28
- [ ルートオブジェクト] ( api/route-object.md )
28
- - [ ルートコンストラクタオプション ] ( api/options.md )
29
- - [ ルートインスタンス ] ( api/router-instance.md )
29
+ - [ ルーターコンストラクタオプション ] ( api/options.md )
30
+ - [ ルーターインスタンス ] ( api/router-instance.md )
30
31
- [ コンポーネント注入] ( api/component-injections.md )
Original file line number Diff line number Diff line change 2
2
3
3
この名前が示すように、 ` vue-router ` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。
4
4
5
+ ** パラメータまたはクエリの変更はナビゲーションガードをトリガーしない** ということを覚えておいてください。単純にそれらの変更を対応するために [ ` $route ` オブジェクトを監視します] ( ../essentials/dynamic-matching.md#reacting-to-params-changes ) 。
6
+
5
7
### グローバルガード
6
8
7
9
` router.beforeEach ` を使ってグローバル before ガードを登録できます。
@@ -60,7 +62,11 @@ const router = new VueRouter({
60
62
61
63
### コンポーネント内ガード
62
64
63
- 最後に、 ` beforeRouteEnter ` と ` beforeRouteLeave ` を使ってルートコンポーネント内側でルートナビゲーションガードを直接定義することができます。
65
+ 最後に、 以下のオプションでルートコンポーネント(ルータ設定に渡されるもの)の内側でルートナビゲーションガードを直接定義することができます。
66
+
67
+ - ` beforeRouteEnter `
68
+ - ` beforeRouteUpdate ` (2.2 で追加)
69
+ - ` beforeRouteLeave `
64
70
65
71
``` js
66
72
const Foo = {
@@ -70,6 +76,13 @@ const Foo = {
70
76
// `this` でのこのコンポーネントへのアクセスはできません。
71
77
// なぜならばこのガードが呼び出される時にまだ作られていないからです!
72
78
},
79
+ beforeRouteUpdate (to , from , next ) {
80
+ // このコンポーネントを描画するルートが変更されたときに呼び出されますが、
81
+ // このコンポーネントは新しいルートで再利用されます。
82
+ // たとえば、動的な引数 /foo/:id を持つルートの場合、/foo/1 と /foo/2 の間を移動すると、
83
+ // 同じ Foo コンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。
84
+ // `this` でコンポーネントインスタンスにアクセスできます。
85
+ },
73
86
beforeRouteLeave (to , from , next ) {
74
87
// このコンポーネントをレンダリングするルートが間もなく
75
88
// ナビゲーションから離れていく時に呼ばれます。
Original file line number Diff line number Diff line change 1
- # ルートコンストラクタオプション
1
+ # ルーターコンストラクタオプション
2
2
3
3
### routes
4
4
Original file line number Diff line number Diff line change 28
28
グローバルなナビゲーションガードの追加。[ ナビゲーションガード] ( ../advanced/navigation-guards.md ) をご参照ください。
29
29
30
30
31
- - ** router.push(location)**
32
- - ** router.replace(location)**
31
+ - ** router.push(location, onComplete?, onAbort? )**
32
+ - ** router.replace(location, onComplete?, onAbort? )**
33
33
- ** router.go(n)**
34
34
- ** router.back()**
35
35
- ** router.forward()**
53
53
href: string;
54
54
}
55
55
```
56
+
57
+ - ** router.addRoute(routes)**
58
+
59
+ > 2.2.0+
60
+
61
+ 動的にルートをルーターに追加します。引数は ` routes ` コンストラクタオプションで同じルート設定形式を使用する配列でなければなりません。
62
+
63
+ - ** router.onReady(callback)**
64
+
65
+ > 2.2.0+
66
+
67
+ このメソッドは、ルーターが初期ナビゲーションを完了したときに呼び出されるコールバックをキューに入れます。つまり、初期ルートに関連付けられているすべての非同期 enter フックと非同期コンポーネントを解決したことを意味します。
68
+
69
+ これは、サーバーとクライアントの両方で一貫した出力を保証するために、サーバーサイドレンダリングに役立ちます。
Original file line number Diff line number Diff line change 94
94
95
95
- デフォルト: ` false `
96
96
97
- デフォルトのアクティブクラスのマッチングの振る舞いは ** 包含的なマッチ** です。 例えば、現在のパスが ` /a ` から始まる間は 、` <router-link to="/a"> ` にアクティブクラスが適用されます。
97
+ デフォルトのアクティブクラスのマッチングの振る舞いは ** 包含的なマッチ** です。 例えば、現在のパスが ` /a/ ` または ` /a ` から始まる限りは 、` <router-link to="/a"> ` にアクティブクラスが適用されます。
98
98
99
99
この結果として ` <router-link to="/"> ` は全てのルートに対してアクティブになります! リンクに対して "正確なマッチモード" を強制するために、 ` exact ` プロパティを使ってください。
100
100
105
105
106
106
アクティブリンククラスをより説明している例としてこちらの [ 動作] ( https://jsfiddle.net/8xrk1n9f/ ) を確認してください。
107
107
108
- - ** events **
108
+ - ** event **
109
109
110
110
> 2.1.0+
111
111
Original file line number Diff line number Diff line change 2
2
3
3
宣言的なナビゲーションとしてアンカータグを作成する ` <router-link> ` がありますが、ルーターのインスタンスメソッドを使ったプログラムによる方法でもそれは可能です。
4
4
5
- #### ` router.push(location) `
5
+ #### ` router.push(location, onComplete?, onAbort? ) `
6
6
7
7
異なる URL へ遷移するときに ` router.push ` が使えます。このメソッドは history スタックに新しいエントリを追加します。それによってユーザーがブラウザの戻るボタンをクリックした時に前の URL に戻れるようになります。
8
8
@@ -29,7 +29,9 @@ router.push({ name: 'user', params: { userId: 123 }})
29
29
router .push ({ path: ' register' , query: { plan: ' private' }})
30
30
```
31
31
32
- #### ` router.replace(location) `
32
+ 2.2.0 以降では、必要に応じて、第 2 引数と第 3 引数として ` router.push ` または ` router.replace ` に ` onComplete ` と ` onAbort ` コールバックを指定します。これらのコールバックは、ナビゲーションが正常に完了したとき(すべての非同期フックが解決された後)に呼び出されるか、またはそれぞれ中止されます(現在のナビゲーションが終了する前に同じルートまたは別のルートにナビゲートされた)
33
+
34
+ #### ` router.replace(location, onComplete?, onAbort?) `
33
35
34
36
これは ` router.push ` のように動作しますが、異なる点は新しい history エントリを追加しないで遷移することです。この名前から推定されるように、現在のエントリを置換します。
35
37
Original file line number Diff line number Diff line change
1
+ # ルートコンポーネントにプロパティを渡す
2
+
3
+ コンポーネントで ` $route ` を使うと特定のURLでしか使用できないコンポーネントの柔軟性が制限されるルートで密結合を作り出します。
4
+
5
+ このコンポーネントをルーターが使用するプロパティからこのコンポーネントを分離するには:
6
+
7
+ ** ❌ $route に結合**
8
+
9
+ ``` js
10
+ const User = {
11
+ template: ' <div>User {{ $route.params.id }}</div>'
12
+ }
13
+ const router = new VueRouter ({
14
+ routes: [
15
+ { path: ' /user/:id' , component: User }
16
+ ]
17
+ })
18
+ ```
19
+
20
+ ** 👍 プロパティによる分離**
21
+
22
+ ``` js
23
+ const User = {
24
+ props: [' id' ],
25
+ template: ' <div>User {{ id }}</div>'
26
+ }
27
+ const router = new VueRouter ({
28
+ routes: [
29
+ { path: ' /user/:id' , component: User, props: true }
30
+ ]
31
+ })
32
+ ```
33
+
34
+ これにより、コンポーネントをどこからでも使用できるようになり、コンポーネントの再利用とテストが容易になります。
35
+
36
+ ### Boolean モード
37
+
38
+ props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。
39
+
40
+ ### Object モード
41
+
42
+ props がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。
43
+ プロパティが静的なときに便利です。
44
+
45
+ ``` js
46
+ const router = new VueRouter ({
47
+ routes: [
48
+ { path: ' /promotion/from-newsletter' , component: Promotion, props: { newsletterPopup: false } }
49
+ ]
50
+ })
51
+ ```
52
+
53
+ ### Function モード
54
+
55
+ プロパティを返す関数を作成することができます。
56
+ これにより、パラメータを別のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。
57
+
58
+ ``` js
59
+ const router = new VueRouter ({
60
+ routes: [
61
+ { path: ' /search' , component: SearchUser, props : (route ) => ({ query: route .query .q }) }
62
+ ]
63
+ })
64
+ ```
65
+
66
+ url ` /search?q=vue ` は ` {query: "vue"} ` をプロパティとして SearchUser コンポーネントに渡します。
67
+
68
+ ルート変更時にのみ評価されるため、プロパティの機能はステートレスにしてください。
69
+ ラッパーコンポーネントを使用すると、状態を変更して状態を変更することができます。
70
+
71
+ 高度な使い方については、[ example] ( https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js ) を参照してください。
You can’t perform that action at this time.
0 commit comments