Skip to content

Commit

Permalink
Update Japanese docs (#1813)
Browse files Browse the repository at this point in the history
* docs: http -> https

* docs: tweak js string quoting

NOTE:
  pick up from 7d2e60e

* docs: pick up from a5ecfa1

* docs: translate previous commit

* docs: pick up from 8f10178

* docs: translate previous commit

* docs: pick up from 91f4ad7

* docs: translate previous commit

* docs: pick up from a06e0b2

* docs: translate previous commit

* docs: pick up from 3b16bf1

* docs: translate previous commit

* docs: pick up from f0871d1

* docs: translate previous commit

* docs: update SUMMARY translation

NOTE:
  pick up from b707352

* docs: fixed translation mistaking

ref: #1813 (comment)

* docs: fixed typo
  • Loading branch information
kazupon committed Oct 23, 2017
1 parent af95719 commit 8ee872f
Show file tree
Hide file tree
Showing 10 changed files with 105 additions and 18 deletions.
6 changes: 3 additions & 3 deletions docs/ja/SUMMARY.md
@@ -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
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
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
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
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
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
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
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
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
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

0 comments on commit 8ee872f

Please sign in to comment.