diff --git a/docs/ja/guide/advanced/navigation-guards.md b/docs/ja/guide/advanced/navigation-guards.md index 7a1384e70..90cb4f54c 100644 --- a/docs/ja/guide/advanced/navigation-guards.md +++ b/docs/ja/guide/advanced/navigation-guards.md @@ -4,7 +4,7 @@ **パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更に対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するかの、どちらかができます。 -## グローバルガード +## グローバルビフォーガード `router.beforeEach` を使ってグローバル before ガードを登録できます。 diff --git a/docs/ja/guide/essentials/dynamic-matching.md b/docs/ja/guide/essentials/dynamic-matching.md index 7e432b8b4..2a1658fbe 100644 --- a/docs/ja/guide/essentials/dynamic-matching.md +++ b/docs/ja/guide/essentials/dynamic-matching.md @@ -65,6 +65,35 @@ const User = { } ``` +## すべてキャッチするルート / 404 Not found ルート + +通常のパラメータは、`/` で区切られた url フラグメントの間にある文字だけにマッチします。**何でも**一致させたい場合は、アスタリスク(`*`)を使うことができます: + +```js +{ + // 全てにマッチします + path: '*' +} +{ + // `/user-`から始まる任意のものにマッチします + path: '/user-*' +} +``` + +_アスタリスク_ ルートを使用するときは、_アスタリスク_ ルートが最後になるようにルートを正しく順序付けてください。 +`{ path: '*' }` ルートは、通常クライアントサイドの404ページで使われます。_History モード_ を使用する場合は、[正しいサーバの設定](./history-mode.md)も同様にしっかりしてください。 + +_アスタリスク_ を使用するときは、 `pathMatch` と名付けられたパラメータは、自動的に `$route.params` に追加されます。_アスタリスク_ によってマッチされた url の残りを含みます: + +```js +// { path: '/user-*' } というルートが与えられた +this.$router.push('/user-admin') +this.$route.params.pathMatch // 'admin' +// { path: '*' } というルートが与えられた +this.$router.push('/non-existing') +this.$route.params.pathMatch // '/non-existing' +``` + ## 高度なマッチングパターン `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) をご参照ください。 diff --git a/docs/ja/guide/essentials/navigation.md b/docs/ja/guide/essentials/navigation.md index e1c9a69a5..997a9db29 100644 --- a/docs/ja/guide/essentials/navigation.md +++ b/docs/ja/guide/essentials/navigation.md @@ -25,21 +25,21 @@ router.push('home') router.push({ path: 'home' }) // 名前付きルート -router.push({ name: 'user', params: { userId: 123 }}) +router.push({ name: 'user', params: { userId: '123' } }) // 結果的に /register?plan=private になる query -router.push({ path: 'register', query: { plan: 'private' }}) +router.push({ path: 'register', query: { plan: 'private' } }) ``` **注意**: `params` は、上記例に示すように、`path` が提供されている場合は無視されます。これは `query` に対するケースとは異なります。 代わりに、ルートの `name` か任意のパラメータを付与した `path` 全体を手動で指定する必要があります: ```js -const userId = 123 -router.push({ name: 'user', params: { userId }}) // -> /user/123 +const userId = '123' +router.push({ name: 'user', params: { userId } }) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // これは動作"しません" -router.push({ path: '/user', params: { userId }}) // -> /user +router.push({ path: '/user', params: { userId } }) // -> /user ``` 同じルールが、`router-link` コンポーネントの `to` プロパティに対して適用されます。