Skip to content

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

Merged
merged 9 commits into from
May 16, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 16 additions & 18 deletions docs/ja/advanced/data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,30 +83,28 @@ export default {
},
beforeRouteEnter (route, redirect, next) {
getPost(route.params.id, (err, post) => {
if (err) {
// 何らかのグローバルエラーメッセージを表示する
} else {
next(vm => {
vm.post = post
})
}
next(vm => vm.setData(err, post))
})
},
// コンポーネントが既にレンダリングされている際のルート変更時は
// ロジックが少し異なります
watch: {
$route () {
this.post = null
getPost(this.$route.params.id, (err, post) => {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}
```

次に入ってくる view へのリソースを取得している間、ユーザーは現在の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。
次に入ってくる view へのリソースを取得している間、ユーザーは前の view に滞在します。したがって、データ取得中にプログレスバーや何らかの指標を表示することをオススメします。また、もしデータ取得が失敗した場合、何かグローバルな警告メッセージのようなものを表示する必要があります。
26 changes: 25 additions & 1 deletion docs/ja/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` を使用するかの、どちらかができます

### グローバルガード

Expand Down Expand Up @@ -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` に似ていますが、**すべてのコンポーネント内ガードと非同期ルートコンポーネントが解決された後**、ナビゲーションが解決される直前に解決ガードが呼び出されるという違いがあります。

### グローバルな After フック

グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは `next` 関数を受け取らず、ナビゲーションに影響しません。

``` js
Expand Down Expand Up @@ -106,3 +116,17 @@ beforeRouteEnter (to, from, next) {
```

`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。

### 完全なナビゲーション解決フロー
1. ナビゲーションがトリガされる
2. 非アクティブ化されたコンポーネントで leave ガードを呼ぶ
3. グローバル `beforeEach` ガードを呼ぶ
4. 再利用されるコンポーネントで `beforeRouteUpdate` ガードを呼ぶ (2.2 以降)
5. ルート設定内の `beforeEnter` を呼ぶ
6. 非同期ルートコンポーネントを解決する
7. アクティブ化されたコンポーネントで `beforeRouteEnter` を呼ぶ
8. グローバル `beforeResolve` ガードを呼ぶ (2.5 以降)
9. ナビゲーションが確定される
10. グローバル `afterEach` フックを呼ぶ
11. DOM 更新がトリガされる
12. インスタンス化されたインスンタンスによって `beforeRouteEnter` ガードで `next` に渡されたコールバックを呼ぶ
16 changes: 13 additions & 3 deletions docs/ja/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 が存在しない場合、ルーターは自動的にこのモードに強制されます。**

Expand All @@ -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

Expand All @@ -66,7 +76,7 @@
) => { x: number, y: number } | { selector: string } | ?{}
```

より詳細ついては [スクロールの振る舞い](../advanced/scroll-behavior.md) をご参照ください
より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください

### parseQuery / stringifyQuery

Expand Down
2 changes: 2 additions & 0 deletions docs/ja/api/router-instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@
### メソッド

- **router.beforeEach(guard)**
- **router.beforeResolve(guard)** (2.5.0+)
- **router.afterEach(hook)**

グローバルなナビゲーションガードの追加。[ナビゲーションガード](../advanced/navigation-guards.md) をご参照ください。

2.5.0 以降では、3 つのメソッドすべてが、登録されたガード/フックを削除する関数を返します。

- **router.push(location, onComplete?, onAbort?)**
- **router.replace(location, onComplete?, onAbort?)**
Expand Down
10 changes: 10 additions & 0 deletions docs/ja/api/router-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,16 @@

リンクナビゲーションをトリガーできるイベントを指定します。

- **exact-active-class**

> 2.5.0+

- 型 `string`

- デフォルト: `"router-link-exact-active"`

完全一致によってリンクがアクティブになっているときに適用されるアクティブな CSS クラスを設定します。デフォルト値は `linkExactActiveClass` ルーターコンストラクタのオプション経由でグローバルに設定することもできます。

### 外側の要素へのアクティブクラスの適用

アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `<router-link>` を使って外側の要素レンダリングして、その内側に生の `<a>` タグをラップすることができます。
Expand Down
12 changes: 12 additions & 0 deletions docs/ja/essentials/dynamic-matching.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,18 @@ const User = {
}
```

または、2.2 で導入された `beforeRouteUpdate` ガードを使用します:

``` js
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// ルート変更に反応する...
// 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) をご参照ください。
Expand Down
2 changes: 1 addition & 1 deletion docs/ja/essentials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Vue.js と vue-router を使ったシングルページアプリケーションの構築は驚くほど簡単です。Vue.js のコンポーネントを使ってアプリケーションを既に構成しています。vue-router を混ぜ込むには、コンポーネントとルートをマッピングさせて vue-router にどこでレンダリングするかを知らせるだけです。以下が基本的な例です。

> すべての example では、vue のスタンドアロンバージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](http://jp.vuejs.org/v2/guide/installation.html#スタンドアロン-vs-ランタイム限定ビルド)を参照してください。
> すべての example では、vue の完全バージョンを使用してテンプレートを解析可能にしています。詳細は[こちら](https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い)を参照してください。

### HTML

Expand Down