File tree Expand file tree Collapse file tree 3 files changed +35
-6
lines changed Expand file tree Collapse file tree 3 files changed +35
-6
lines changed Original file line number Diff line number Diff line change 44
55** パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [ ` $route ` オブジェクトを監視する] ( ../essentials/dynamic-matching.md#reacting-to-params-changes ) 、またはコンポーネント内ガード ` beforeRouteUpdate ` を使用するかの、どちらかができます。
66
7- ## グローバルガード
7+ ## グローバルビフォーガード
88
99` router.beforeEach ` を使ってグローバル before ガードを登録できます。
1010
Original file line number Diff line number Diff line change @@ -65,6 +65,35 @@ const User = {
6565}
6666```
6767
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+
6897## 高度なマッチングパターン
6998
7099` 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')
2525router .push ({ path: ' home' })
2626
2727// 名前付きルート
28- router .push ({ name: ' user' , params: { userId: 123 } })
28+ router .push ({ name: ' user' , params: { userId: ' 123' } })
2929
3030// 結果的に /register?plan=private になる query
31- router .push ({ path: ' register' , query: { plan: ' private' }})
31+ router .push ({ path: ' register' , query: { plan: ' private' } })
3232```
3333
3434** 注意** : ` params ` は、上記例に示すように、` path ` が提供されている場合は無視されます。これは ` query ` に対するケースとは異なります。
3535代わりに、ルートの ` name ` か任意のパラメータを付与した ` path ` 全体を手動で指定する必要があります:
3636
3737``` 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
4040router .push ({ path: ` /user/${ userId} ` }) // -> /user/123
4141// これは動作"しません"
42- router .push ({ path: ' /user' , params: { userId }}) // -> /user
42+ router .push ({ path: ' /user' , params: { userId } }) // -> /user
4343```
4444
4545同じルールが、` router-link ` コンポーネントの ` to ` プロパティに対して適用されます。
You can’t perform that action at this time.
0 commit comments