Skip to content

Commit 9326d44

Browse files
kazuponyyx990803
authored andcommitted
docs: JA updates (vuejs#1524)
* fix consitency NOTE: pick up from the blow: - vuejs@f636b8e - vuejs@c1e89e1 * add IIS configuration NOTE: pick up from vuejs@7646663 * add note about current and append in resolve NOTE: pick up from vuejs@e49c10e * change code spliting point NOTE: pick up from vuejs@39f4cf0 * pick up lazy-loading from original doc NOTE: pick up from vuejs@ba05490 * translate previous commit * update 2.6 docs NOTE: pick up from vuejs@952fb68
1 parent ad9333a commit 9326d44

16 files changed

+110
-60
lines changed

docs/ja/SUMMARY.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,19 @@
2323
- [スクロールの振る舞い](advanced/scroll-behavior.md)
2424
- [遅延ローディング](advanced/lazy-loading.md)
2525
- API リファレンス
26-
- [router-link](api/router-link.md)
27-
- [router-view](api/router-view.md)
28-
- [ルートオブジェクト](api/route-object.md)
2926
- [ルーターコンストラクタオプション](api/options.md)
27+
- [routes](api/options.md#routes)
28+
- [mode](api/options.md#mode)
29+
- [base](api/options.md#base)
30+
- [linkActiveClass](api/options.md#linkactiveclass)
31+
- [linkExactActiveClass](api/options.md#linkexactactiveclass)
32+
- [scrollBehavior](api/options.md#scrollbehavior)
33+
- [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery)
34+
- [fallback](api/options.md#fallback)
3035
- [ルーターインスタンス](api/router-instance.md)
36+
- [Properties](api/router-instance.md#properties)
37+
- [Methods](api/router-instance.md#methods)
38+
- [ルートオブジェクト](api/route-object.md)
3139
- [コンポーネント注入](api/component-injections.md)
40+
- [router-link](api/router-link.md)
41+
- [router-view](api/router-view.md)

docs/ja/advanced/data-fetching.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# データ取得
22

3-
ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールをレンダリングする前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。
3+
ルートが有効化された時にサーバーからデータを取得する必要がしばしばあります。例えば、ユーザープロフィールを描画する前に、サーバーからユーザーデータを取得する必要があります。これを実現するためには 2 種類の方法があります。
44

55
- **ナビゲーション後の取得**: ナビゲーションを先に実行し、その後次に入ってくるコンポーネントのライフサイクルフック内でデータを取得します。データ取得中にローディングを表示します。
66

@@ -10,7 +10,7 @@
1010

1111
## ナビゲーション後の取得
1212

13-
このアプローチを取る時は次に来るコンポーネントが即座にナビゲーションされ、レンダリングされます。そして、コンポーネントの `created` フックの中でデータを取得します。この方法ではネットワーク越しにデータを取得している間にローディング状態を表示する機会があります。また、各 view に対して、異なるローディングの対応をすることもできます。
13+
このアプローチを取る時は次に来るコンポーネントが即座にナビゲーションされ、描画されます。そして、コンポーネントの `created` フックの中でデータを取得します。この方法ではネットワーク越しにデータを取得している間にローディング状態を表示する機会があります。また、各 view に対して、異なるローディングの対応をすることもできます。
1414

1515
`$route.params.id` を元にポストのデータを取得する必要がある `Post` コンポーネントを想定してみましょう。
1616

@@ -55,7 +55,7 @@ export default {
5555
fetchData () {
5656
this.error = this.post = null
5757
this.loading = true
58-
// getPost をあなたのデータ取得用 util や API ラッパーに置き換えてください
58+
// `getPost` をあなたのデータ取得用 util や API ラッパーに置き換えてください
5959
getPost(this.$route.params.id, (err, post) => {
6060
this.loading = false
6161
if (err) {
@@ -86,7 +86,7 @@ export default {
8686
next(vm => vm.setData(err, post))
8787
})
8888
},
89-
// コンポーネントが既にレンダリングされている際のルート変更時は
89+
// コンポーネントが既に描画されている際のルート変更時は
9090
// ロジックが少し異なります
9191
beforeRouteUpdate (to, from, next) {
9292
this.post = null

docs/ja/advanced/lazy-loading.md

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,36 @@
22

33
バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。
44

5-
Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント)Webpack[コード分割機能](https://webpack.js.org/guides/code-splitting-require/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。
5+
Vue の [非同期コンポーネント機能](http://jp.vuejs.org/guide/components.html#非同期コンポーネント)webpack[コード分割機能](https://webpack.js.org/guides/code-splitting-async/) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。
66

7-
必要なことは非同期のルートコンポーネントを定義するだけです。
7+
最初に、非同期コンポーネントは Promise (コンポーネント自身解決する必要がある) を返すファクトリ関数として定義できます:
88

99
``` js
10-
const Foo = resolve => {
11-
// require.ensure はコード分割のための Webpack の特殊な文法です。
12-
require.ensure(['./Foo.vue'], () => {
13-
resolve(require('./Foo.vue'))
14-
})
15-
}
10+
const Foo = () => Promise.resolve({ /* component definition */ })
1611
```
1712

18-
コード分割の文法の代替として、 AMD 形式の require もあります。これを使うと次のように簡略されます。
13+
次に、webpack 2 において [動的 import](https://github.com/tc39/proposal-dynamic-import) 構文を使用して、コード分割ポイントを示すことができます:
1914

2015
``` js
21-
const Foo = resolve => require(['./Foo.vue'], resolve)
16+
import('./Foo.vue') // returns a Promise
2217
```
2318

24-
特にルート設定を変更する必要はなく、普段のように `Foo` を使用するだけです。
19+
> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。
20+
21+
2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です:
2522

2623
``` js
27-
const router = new VueRouter({
28-
routes: [
29-
{ path: '/foo', component: Foo }
30-
]
31-
})
24+
const Foo = () => import('./Foo.vue')
3225
```
3326

3427
### 同じチャンク内でのコンポーネントグループ化
3528

36-
しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 `require.ensure` の第 3 引数にチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-require/#chunkname) を使う必要があります。
29+
しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 特別なコメント構文 (webpack > 2.4 必須)を使用してチャンクの名前を提供する [名前付きチャンク](https://webpack.js.org/guides/code-splitting-async/#chunk-names) を使う必要があります。
3730

3831
``` js
39-
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
40-
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
41-
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
32+
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
33+
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
34+
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
4235
```
4336

44-
Webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。つまり、 `require.ensure` に対して明示的に依存関係をリストする必要がありません (したがって空の配列を渡しています)
37+
webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。

docs/ja/advanced/navigation-guards.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const router = new VueRouter({
8484
const Foo = {
8585
template: `...`,
8686
beforeRouteEnter (to, from, next) {
87-
// このコンポーネントをレンダリングするルートが確立する前に呼ばれます
87+
// このコンポーネントを描画するルートが確立する前に呼ばれます
8888
// `this` でのこのコンポーネントへのアクセスはできません。
8989
// なぜならばこのガードが呼び出される時にまだ作られていないからです!
9090
},
@@ -96,7 +96,7 @@ const Foo = {
9696
// `this` でコンポーネントインスタンスにアクセスできます。
9797
},
9898
beforeRouteLeave (to, from, next) {
99-
// このコンポーネントをレンダリングするルートが間もなく
99+
// このコンポーネントを描画するルートが間もなく
100100
// ナビゲーションから離れていく時に呼ばれます。
101101
// `this` でのコンポーネントインスタンスへのアクセスができます。
102102
}

docs/ja/advanced/scroll-behavior.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const router = new VueRouter({
2121

2222
- `{ x: number, y: number }`
2323
- `{ selector: string }`
24+
- `{ selector: string, offset? : { x: number, y: number }}` (2.6.0 以降においてだけ offset はサポート)
2425

2526
もし falsy な値や空のオブジェクトが返った場合、何もスクロールは起きません。
2627

@@ -53,6 +54,7 @@ scrollBehavior (to, from, savedPosition) {
5354
if (to.hash) {
5455
return {
5556
selector: to.hash
57+
// , offset: { x: 0, y: 10 }
5658
}
5759
}
5860
}

docs/ja/advanced/transitions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Bar = {
4545

4646
``` js
4747
// そして親コンポーネントの中で、
48-
// $route を watch して使用するトランジションを決定します
48+
// `$route` を watch して使用するトランジションを決定します
4949
watch: {
5050
'$route' (to, from) {
5151
const toDepth = to.path.split('/').length

docs/ja/api/options.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
children?: Array<RouteConfig>; // ネストされたルート用
1818
beforeEnter?: (to: Route, from: Route, next: Function) => void;
1919
meta?: any;
20+
21+
// 2.6.0+
22+
caseSensitive?: boolean; // センシティブマッチをケースとして使用するかどうか? (デフォルト: false)
23+
pathToRegexpOptions?: Object; // 正規表現のコンパイルとして path-to-regexp オプション
2024
}
2125
```
2226

@@ -85,3 +89,13 @@
8589
- 型: `Function`
8690

8791
カスタムクエリ構文解析関数 / 文字列化関数を提供します。デフォルトを上書きします。
92+
93+
### fallback
94+
95+
> 2.6.0+
96+
97+
- 型: `boolean`
98+
99+
ブラウザが `history.pushState` をサポートしないとき、 ルーターが `hash` モードにフォールバックかどうか制御します。デフォルトは `true`
100+
101+
これを `false` に設定すると、本質的に全ての `router-link` ナビゲーションが IE9 においてフルページリフレッシュになります。これは、サーバサイドレンダリングでハッシュモードの URL が機能しないため、IE9 で動作する必要がある場合に便利です。

docs/ja/api/route-object.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
``` js
1616
router.beforeEach((route, redirect, next) => {
17-
// ここの route はルートオブジェクト
17+
// `to` と `from` は両方ともルートオブジェクト
1818
})
1919
```
2020

@@ -23,7 +23,7 @@
2323
``` js
2424
const router = new VueRouter({
2525
scrollBehavior (to, from, savedPosition) {
26-
// to と from は両方ともルートオブジェクト
26+
// `to``from` は両方ともルートオブジェクト
2727
}
2828
})
2929
```

docs/ja/api/router-instance.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
}
5757
```
5858

59+
- `current` はデフォルトによる現在のルートです(ほとんどの場合、これを変更する必要はありません)
60+
- `append``current` ルートにパスを追加できます([`router-link`](https://router.vuejs.org/en/api/router-link.html#props)と同様に)
61+
5962
- **router.addRoutes(routes)**
6063

6164
> 2.2.0+

docs/ja/api/router-link.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `<router-link>`
22

3-
`<router-link>` はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は `to` プロパティを使って指定します。デフォルトでは正しい `href` と共に `<a>` タグとしてレンダリングしますが`tag` プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。
3+
`<router-link>` はルーターが使用可能になっているアプリケーションでユーザーのナビゲーションを有効にするためのコンポーネントです。対象とする location は `to` プロパティを使って指定します。デフォルトでは正しい `href` と共に `<a>` タグとして描画しますが`tag` プロパティを設定することも可能です。さらに、対象のルートがアクティブの時に、そのリンクは自動的にアクティブな CSS クラスが当てられます。
44

55
下記の理由により `<router-link>` はハードコードする `<a href="...">` よりも好ましいです。
66

@@ -23,13 +23,13 @@
2323
``` html
2424
<!-- 文字列 -->
2525
<router-link to="home">Home</router-link>
26-
<!-- 次のようにレンダリングされる -->
26+
<!-- 次のように描画される -->
2727
<a href="home">Home</a>
2828

29-
<!-- v-bind を使った javascript 表現 -->
29+
<!-- `v-bind` を使った javascript -->
3030
<router-link v-bind:to="'home'">Home</router-link>
3131

32-
<!-- 他のプロパティのバインディングのような v-bind の省略表現 -->
32+
<!-- 他のプロパティのバインディングのような `v-bind` の省略表現 -->
3333
<router-link :to="'home'">Home</router-link>
3434

3535
<!-- 上記と同じ -->
@@ -38,7 +38,7 @@
3838
<!-- 名前付きルート -->
3939
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
4040

41-
<!-- 結果的に /register?plan=private になる query -->
41+
<!-- 結果的に `/register?plan=private` になるクエリ-->
4242
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
4343
```
4444

@@ -72,11 +72,11 @@
7272

7373
- デフォルト: `"a"`
7474

75-
しばしば `<router-link>``<li>` などの他のタグとしてレンダリングしたい時があるでしょう。そこで、どのタグとしてレンダリングするかを指定するために `tag` プロパティを使うことができます。そして、依然ナビゲーションのためのクリックイベントを listen します。
75+
しばしば `<router-link>``<li>` などの他のタグとして描画したい時があるでしょう。そこで、どのタグとして描画するかを指定するために `tag` プロパティを使うことができます。そして、依然ナビゲーションのためのクリックイベントを listen します。
7676

7777
``` html
7878
<router-link to="/foo" tag="li">foo</router-link>
79-
<!-- 以下のようにレンダリングされます -->
79+
<!-- 以下のように描画されます -->
8080
<li>foo</li>
8181
```
8282

@@ -99,7 +99,7 @@
9999
この結果として `<router-link to="/">` は全てのルートに対してアクティブになります! リンクに対して "正確なマッチモード" を強制するために、 `exact` プロパティを使ってください。
100100

101101
``` html
102-
<!-- このリンクは / だけにアクティブになります -->
102+
<!-- このリンクは `/` だけにアクティブになります -->
103103
<router-link to="/" exact>
104104
```
105105

@@ -127,7 +127,7 @@
127127

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

130-
アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `<router-link>` を使って外側の要素レンダリングして、その内側に生の `<a>` タグをラップすることができます。
130+
アクティブクラスを `<a>` タグ自身よりも、外側の要素に対して適用したいことがあるでしょう。その場合、 `<router-link>` を使って外側の要素を描画して、その内側に生の `<a>` タグをラップすることができます。
131131

132132
``` html
133133
<router-link tag="li" to="/foo">

docs/ja/api/router-view.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `<router-view>`
22

3-
`<router-view>` コンポーネントは与えられたパスに対してマッチしたコンポーネントをレンダリングする関数型コンポーネントです`<router-view>` の中でレンダリングされるコンポーネント自身もまた、ネストされたパスに対してコンポーネントをレンダリングするための `<router-view>` を持つことができます。
3+
`<router-view>` コンポーネントは与えられたパスに対してマッチしたコンポーネントを描画する関数型コンポーネントです`<router-view>` の中で描画されるコンポーネント自身もまた、ネストされたパスに対してコンポーネントを描画するための `<router-view>` を持つことができます。
44

55
### プロパティ
66

@@ -10,11 +10,11 @@
1010

1111
- デフォルト: `"default"`
1212

13-
`<router-view>` が名前を持つ時、マッチしたルートレコードの `components` オプション内で対応する名前のコンポーネントをレンダリングします。例は [名前付きビュー](../essentials/named-views.md) をご参照ください。
13+
`<router-view>` が名前を持つ時、マッチしたルートレコードの `components` オプション内で対応する名前のコンポーネントを描画します。例は [名前付きビュー](../essentials/named-views.md) をご参照ください。
1414

1515
### 振る舞い
1616

17-
name ではないプロパティもレンダリングされるコンポーネントに渡されますが、ほとんどの場合ルート単位のデータはルートのパラメーターに含まれています。
17+
name ではないプロパティも描画されるコンポーネントに渡されますが、ほとんどの場合ルート単位のデータはルートのパラメーターに含まれています。
1818

1919
これは普通のコンポーネントなので、 `<transition>``<keep-alive>` と共に動作します。両方を同時に使用する場合は `<keep-alive>` を内側にするようにしてください。
2020

0 commit comments

Comments
 (0)