File tree 3 files changed +35
-6
lines changed
3 files changed +35
-6
lines changed Original file line number Diff line number Diff line change 4
4
5
5
** パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [ ` $route ` オブジェクトを監視する] ( ../essentials/dynamic-matching.md#reacting-to-params-changes ) 、またはコンポーネント内ガード ` beforeRouteUpdate ` を使用するかの、どちらかができます。
6
6
7
- ## グローバルガード
7
+ ## グローバルビフォーガード
8
8
9
9
` router.beforeEach ` を使ってグローバル before ガードを登録できます。
10
10
Original file line number Diff line number Diff line change @@ -65,6 +65,35 @@ const User = {
65
65
}
66
66
```
67
67
68
+ ## すべてキャッチするルート / 404 Not found ルート
69
+
70
+ 通常のパラメータは、` / ` で区切られた url フラグメントの間にある文字だけにマッチします。** 何でも** 一致させたい場合は、アスタリスク(` * ` )を使うことができます:
71
+
72
+ ``` js
73
+ {
74
+ // 全てにマッチします
75
+ path: ' *'
76
+ }
77
+ {
78
+ // `/user-`から始まる任意のものにマッチします
79
+ path: ' /user-*'
80
+ }
81
+ ```
82
+
83
+ _ アスタリスク_ ルートを使用するときは、_ アスタリスク_ ルートが最後になるようにルートを正しく順序付けてください。
84
+ ` { path: '*' } ` ルートは、通常クライアントサイドの404ページで使われます。_ History モード_ を使用する場合は、[ 正しいサーバの設定] ( ./history-mode.md ) も同様にしっかりしてください。
85
+
86
+ _ アスタリスク_ を使用するときは、 ` pathMatch ` と名付けられたパラメータは、自動的に ` $route.params ` に追加されます。_ アスタリスク_ によってマッチされた url の残りを含みます:
87
+
88
+ ``` js
89
+ // { path: '/user-*' } というルートが与えられた
90
+ this .$router .push (' /user-admin' )
91
+ this .$route .params .pathMatch // 'admin'
92
+ // { path: '*' } というルートが与えられた
93
+ this .$router .push (' /non-existing' )
94
+ this .$route .params .pathMatch // '/non-existing'
95
+ ```
96
+
68
97
## 高度なマッチングパターン
69
98
70
99
` vue-router ` はパスのマッチングエンジンとして [ path-to-regexp] ( https://github.com/pillarjs/path-to-regexp ) を使っています。これは Optional による動的なセグメント、Zero or more / One or more に対する要求、また、カスタム正規表現パターンまでもサポートしています。 これらの高度なパターンについてはこちらの [ ドキュメンテーション] ( https://github.com/pillarjs/path-to-regexp#parameters ) または、 ` vue-router ` の中でそれらを使っている [ こちらの例] ( https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js ) をご参照ください。
Original file line number Diff line number Diff line change @@ -25,21 +25,21 @@ router.push('home')
25
25
router .push ({ path: ' home' })
26
26
27
27
// 名前付きルート
28
- router .push ({ name: ' user' , params: { userId: 123 } })
28
+ router .push ({ name: ' user' , params: { userId: ' 123' } })
29
29
30
30
// 結果的に /register?plan=private になる query
31
- router .push ({ path: ' register' , query: { plan: ' private' }})
31
+ router .push ({ path: ' register' , query: { plan: ' private' } })
32
32
```
33
33
34
34
** 注意** : ` params ` は、上記例に示すように、` path ` が提供されている場合は無視されます。これは ` query ` に対するケースとは異なります。
35
35
代わりに、ルートの ` name ` か任意のパラメータを付与した ` path ` 全体を手動で指定する必要があります:
36
36
37
37
``` js
38
- const userId = 123
39
- router .push ({ name: ' user' , params: { userId }}) // -> /user/123
38
+ const userId = ' 123'
39
+ router .push ({ name: ' user' , params: { userId } }) // -> /user/123
40
40
router .push ({ path: ` /user/${ userId} ` }) // -> /user/123
41
41
// これは動作"しません"
42
- router .push ({ path: ' /user' , params: { userId }}) // -> /user
42
+ router .push ({ path: ' /user' , params: { userId } }) // -> /user
43
43
```
44
44
45
45
同じルールが、` router-link ` コンポーネントの ` to ` プロパティに対して適用されます。
You can’t perform that action at this time.
0 commit comments