-
-
Notifications
You must be signed in to change notification settings - Fork 5k
Update ja docs #1412
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update ja docs #1412
Changes from 8 commits
e16d9f9
2a0a492
1d31530
7215f45
9f4742c
711bd2d
ab5b241
9ff1b94
4f7bb9b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
|
||
この名前が示すように、 `vue-router` によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。 | ||
|
||
**パラメータまたはクエリの変更はナビゲーションガードをトリガーしない** ということを覚えておいてください。単純にそれらの変更を対応するために [`$route` オブジェクトを監視します](../essentials/dynamic-matching.md#reacting-to-params-changes)。 | ||
**パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない** ということを覚えておいてください。それらの変更を対応するために [`$route` オブジェクトを監視する](../essentials/dynamic-matching.md#reacting-to-params-changes)、またはコンポーネント内ガード `beforeRouteUpdate` を使用するか、どちらかでできます。 | ||
|
||
### グローバルガード | ||
|
||
|
@@ -34,6 +34,16 @@ router.beforeEach((to, from, next) => { | |
|
||
- **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。 | ||
|
||
**常に `next` 関数を呼び出すようにしてください。そうでなければ、フックは決して解決されません。** | ||
|
||
### グローバル解決ガード | ||
|
||
> New in 2.5.0 | ||
|
||
2.5.0 以降では、`router.beforeResolve` によってグローバルガードを登録できます。これは `router.beforeEach` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直ゼインに解決ガードが呼び出されるという違いがあります。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👀 直ゼイン -> 直前 |
||
|
||
### グローバルな After フック | ||
|
||
グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは `next` 関数を受け取らず、ナビゲーションに影響しません。 | ||
|
||
``` js | ||
|
@@ -106,3 +116,17 @@ beforeRouteEnter (to, from, next) { | |
``` | ||
|
||
`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。 | ||
|
||
### 完全なナビゲーション解決フロー | ||
1. ナビゲーションがトリガされる | ||
2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ | ||
3. グローバル `beforeEach` ガードを呼ぶ | ||
4. 再利用コンポーネント (2.2 以降) で `beforeRouteUpdate` ガードを呼ぶ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここの (2.2 以降) はこの文全体にかかっていると思います。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「再利用されるコンポーネント」の方がより具体的ですかね? |
||
5. ルート設定 `beforeEnter` を呼ぶ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「ルート設定内の」まで説明するほうが親切かもです? |
||
6. 非同期ルートコンポーネントを解決する | ||
7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ | ||
8. グローバル `beforeResolve` ガード (2.5 以降) を呼ぶ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここも (2.5 以降) は全体にかかっているように見えます。 |
||
9. ナビゲーションが確定される | ||
10. グローバル `afterEach` フックを呼ぶ | ||
11. DOM 更新がトリガされる | ||
12. インスタンス化されたインスンタンスによって `beforeRouteEnter` ガードで `next` に渡されたコールバックを呼ぶ |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,7 +32,7 @@ | |
|
||
- `hash`: ルーティングに URL hash を使います。HTML5 History API をサポートしていないブラウザ含めて、全ての Vue がサポートしているブラウザで動作します。 | ||
|
||
- `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) をご参照ください。 | ||
- `history`: HTML5 History API とサーバーの設定が必要です。[HTML5 History モード](../essentials/history-mode.md) を参照してください。 | ||
|
||
- `abstract`: 全ての JavaScript の環境で動作します。 e.g. Node.js を使ったサーバーサイド。 **もしブラウザの API が存在しない場合、ルーターは自動的にこのモードに強制されます。** | ||
|
||
|
@@ -50,7 +50,17 @@ | |
|
||
- デフォルト: `"router-link-active"` | ||
|
||
グローバルに設定される `<router-link>` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) もご参照ください。 | ||
グローバルに設定される `<router-link>` のデフォルトのアクティブクラスです。こちらの [router-link](router-link.md) も参照してください。 | ||
|
||
### linkExactActiveClass | ||
|
||
> 2.5.0+ | ||
|
||
- 型: `string` | ||
|
||
- デフォルト: `"router-link-exact-active"` | ||
|
||
完全一致に対してグローバルな `<router-link>` デフォルトアクティブクラスを設定します。[router-link](router-link.md) も参照してください。 | ||
|
||
### scrollBehavior | ||
|
||
|
@@ -66,7 +76,7 @@ | |
) => { x: number, y: number } | { selector: string } | ?{} | ||
``` | ||
|
||
より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) をご参照ください。 | ||
より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 今回の変更じゃないですが、「より詳細については」にしたほうが良さそうですね。 |
||
|
||
### parseQuery / stringifyQuery | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -53,6 +53,18 @@ const User = { | |
} | ||
``` | ||
|
||
または、2.2 で導入された `beforeRouteUpdate` ガードを使用します: | ||
|
||
``` js | ||
const User = { | ||
template: '...', | ||
beforeRouteUpdate (to, from, next) { | ||
// ルート変更にリアクティブにする... | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここの react は reactive property の react とは違う意味で普通に「反応する」という意味だと思うので、「ルート変更に反応する...」でいかがでしょうか? |
||
// next() を呼び出すのを忘れないでください | ||
} | ||
} | ||
``` | ||
|
||
### 高度なマッチングパターン | ||
|
||
`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) をご参照ください。 | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
細かいですが、
が自然かなと感じました。