Skip to content

Update Japanese docs #1813

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 17 commits into from
Oct 23, 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
6 changes: 3 additions & 3 deletions docs/ja/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# vue-router 2
<!--email_off-->
> 注意: vue-router@2.x は Vue 2.x のみで動作します。[0.7 のドキュメントをお探しですか?](https://github.com/vuejs/vue-router/tree/1.0/docs/ja)
<!--/email_off-->

> 注意: TypeScript ユーザ向けは、vue-router@>= 3.0 と vue@>=2.5 が必須、逆もまた同様です。

**[リリースノート](https://github.com/vuejs/vue-router/releases)**

- [インストール](installation.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/ja/advanced/lazy-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Foo = () => Promise.resolve({ /* component definition */ })
import('./Foo.vue') // returns a Promise
```

> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。
> Note: Babel を使用している場合、Babel が構文を正しく解析するために [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) プラグインを追加する必要があります。

2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です:

Expand Down
25 changes: 23 additions & 2 deletions docs/ja/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ router.beforeEach((to, from, next) => {

- **`next(false)`**: 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は(ユーザーが手動で変更した場合でも、戻るボタンの場合でも)、 `from` ルートのURLにリセットされます。

- **`next('/')` または `next({ path: '/' })`**: 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。
- **`next('/')` または `next({ path: '/' })`**: 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。任意のロケーションオブジェクトを `next` に渡すことができます。この `next` には、`replace: true`、 `name: 'home'` のようなオプション、そして [`router-link`、`to` プロパティ](../api/router-link.md)または [`router.push`](../api/router-instance.md#methods)で使用される任意のオプションを指定することができます。

- **`next(error)`**: (2.4.0+) `next` に渡された引数が `Error` インスタンスである場合、ナビゲーションは中止され、エラーは `router.onError()` を介して登録されたコールバックに渡されます。

Expand Down Expand Up @@ -115,7 +115,28 @@ beforeRouteEnter (to, from, next) {
}
```

`beforeRouteLeave` 内で直接 `this` にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは `next(false)` を呼ぶことでキャンセルされます。
コールバックを `next` に渡すことをサポートするのは、`beforeRouteEnter`フックだけであるということに注意してください。`beforeRouteUpdate` と `beforeRouteLeave` の場合、 `this` は既に利用可能です。したがって、コールバックを渡す必要はないので、*サポートされません*:

```js
beforeRouteUpdate (to, from, next) {
// `this` を使用
this.name = to.params.name
next()
}
```

**leave ガード**は、通常、ユーザが保存されていない編集内容で誤って経路を離れるのを防ぐために使用されます。ナビゲーションは `next(false)` を呼び出すことで取り消すことができます。

```js
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
```

### 完全なナビゲーション解決フロー
1. ナビゲーションがトリガされる
Expand Down
22 changes: 20 additions & 2 deletions docs/ja/advanced/scroll-behavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

クライアントサイドのルーティングを使っている時に、新しいルートに対してスクロールをトップへ移動させたいかもしれません、もしくは実際のページリロードがしているように history 要素のスクロールポジションを保持したいこともあるかもしれません。 `vue-router` ではこれらをさらによく実現できます。ルートナビゲーションにおけるスクロールの挙動を完全にカスタマイズすることができます。

**注意: この機能は HTML5 history モードでのみ動作します。**
**注意: この機能は ブラウザが `history.pushState` をサポートしている場合のみ動作します。**

ルートインスタンスを作る時に、 `scrollBehavior` 関数を提供できます。
ルーターインスタンスを作る時に、 `scrollBehavior` 関数を提供できます。

``` js
const router = new VueRouter({
Expand Down Expand Up @@ -61,3 +61,21 @@ scrollBehavior (to, from, savedPosition) {
```

きめの細かいスクロールの挙動コントロールを実装するために [ルートメタフィールド](meta.md) も利用可能です。詳細な例は [こちら](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js) をご参照ください。

### 非同期なスクローリング

> 2.8.0 で新規

期待する位置記述子 (position descriptor) に解決されるプロミスを返すこともできます:

``` js
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
```

スクロールの振る舞いをページの遷移とうまく合わせるために、ページレベルのトランジションコンポーネントからのイベントにフックすることは可能ですが、ユースケースにおいて可能性のある食い違いと複雑さのために、単純に特定のユーザランド実装を可能にするために、このプリミティブな機能を提供します。
9 changes: 7 additions & 2 deletions docs/ja/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,16 @@
シグネチャ:

```
(
type PositionDescriptor =
{ x: number, y: number } |
{ selector: string } |
?{}

type scrollBehaviorHandler = (
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
) => PositionDescriptor | Promise<PositionDescriptor>
```

より詳細については [スクロールの振る舞い](../advanced/scroll-behavior.md) を参照してください。
Expand Down
2 changes: 1 addition & 1 deletion docs/ja/essentials/dynamic-matching.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const User = {
}
```

[こちら](http://jsfiddle.net/yyx990803/4xfa2f19/) のデモの例も確認してみてください。
[こちら](https://jsfiddle.net/yyx990803/4xfa2f19/) のデモの例も確認してみてください。

1 つのルートが複数の動的なセグメントを持つこともできます。そして、それらは `$route.params` の一致したフィールドとマップされます。例:

Expand Down
25 changes: 24 additions & 1 deletion docs/ja/essentials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,30 @@ const app = new Vue({
// これで開始です!
```

[動作](http://jsfiddle.net/yyx990803/xgrjzsup/) の例も確認してみてください.
ルーターを注入することによって、`this.$router` と同様、任意のコンポーネント内部で現在のルートを `this.$route` としてアクセスすることができます:

```js
// Home.vue
export default {
computed: {
username () {
// `params` が表示される
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
```

ドキュメントを通して、しばしば `router` インスタンスを使用することがよくあります。`this.$router` は `router` を使用するのと全く同じです。`this.$router` を使用する理由は、ルーティング操作する必要がある全てのコンポーネントにルーターをインポートしたくないからです。

[動作](https://jsfiddle.net/yyx990803/xgrjzsup/) の例も確認してみてください.

`<router-link>` は対象のルートがマッチした時に自動的に `.router-link-active` が付与されるのにお気づきでしょうか。
より詳細については [API リファレンス](../api/router-link.md) をご参照ください。
28 changes: 23 additions & 5 deletions docs/ja/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,24 +43,24 @@ location / {
#### Native Node.js

```js
const http = require("http")
const fs = require("fs")
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
fs.readFile("index.htm", "utf-8", (err, content) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}

res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
'Content-Type': 'text/html; charset=utf-8'
})

res.end(content)
})
}).listen(httpPort, () => {
console.log("Server listening on: http://localhost:%s", httpPort)
console.log('Server listening on: http://localhost:%s', httpPort)
})
```

Expand Down Expand Up @@ -102,6 +102,24 @@ rewrite {
}
```

#### Firebase のホスティング

以下を `firebase.json` に追加します:

```
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
```

## 注意

この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。
Expand Down
2 changes: 1 addition & 1 deletion docs/ja/essentials/nested-routes.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,4 @@ const router = new VueRouter({
})
```

この例の動作デモは [こちら](http://jsfiddle.net/yyx990803/L7hscd8h/) です。
この例の動作デモは [こちら](https://jsfiddle.net/yyx990803/L7hscd8h/) です。
2 changes: 2 additions & 0 deletions docs/ja/essentials/redirect-and-alias.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const router = new VueRouter({
})
```

[ナビゲーションガード](../advanced/navigation-guards.md)はリダイレクトするルートに提供されず、ターゲット上のみに適用されるということに注意してください。例では、`beforeEnter` または `beforeLeave` ガードを `/a` ルートに追加しても効果がありません。

その他の高度な使い方として、[例](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js) をご参照ください。

### エイリアス
Expand Down