Skip to content

update ja docs #1626

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 6 commits into from
Jul 22, 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
4 changes: 2 additions & 2 deletions docs/ja/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ const Foo = {
beforeRouteUpdate (to, from, next) {
// このコンポーネントを描画するルートが変更されたときに呼び出されますが、
// このコンポーネントは新しいルートで再利用されます。
// たとえば、動的な引数 /foo/:id を持つルートの場合、/foo/1 と /foo/2 の間を移動すると、
// 同じ Foo コンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。
// たとえば、動的な引数 `/foo/:id` を持つルートの場合、`/foo/1``/foo/2` の間を移動すると、
// 同じ `Foo` コンポーネントインスタンスが再利用され、そのときにこのフックが呼び出されます。
// `this` でコンポーネントインスタンスにアクセスできます。
},
beforeRouteLeave (to, from, next) {
Expand Down
44 changes: 39 additions & 5 deletions docs/ja/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,37 @@ location / {
}
```

#### Native Node.js

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

http.createServer((req, res) => {
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"
})

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

#### Node.js (Express)

Node.js/Express では [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback) の利用を検討してください。

#### Internet Information Services (IIS)
```

``` xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
Expand All @@ -61,17 +86,26 @@ Node.js/Express では [connect-history-api-fallback middleware](https://github.
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
```

#### Caddy

```
rewrite {
regexp .*
to {path} /
}
```

## 注意

この点に関して注意があります。全ての not-found パスが `index.html` を提供するため、もはや 404 エラーをサーバーがレポートしなくなります。回避策として、Vue アプリケーション内で 404 ページを表示するために catch-all ルートを実装すべきです。
Expand All @@ -85,4 +119,4 @@ const router = new VueRouter({
})
```

他の方法として、もしあなたが Node.js サーバーを使っている場合、入ってきた URL とマッチさせて、マッチしなかった場合に 404 を返答するサーバーサイドのルーターを使って fallback を実装することもできます。
他の方法として、もしあなたが Node.js サーバーを使っている場合、入ってきた URL とマッチさせて、マッチしなかった場合に 404 を返答するサーバーサイドのルーターを使って fallback を実装することもできます。詳細については [Vue サーバサイドレンダリングのドキュメント](https://ssr.vuejs.org/ja/) を参照してください。
22 changes: 10 additions & 12 deletions docs/ja/essentials/passing-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

コンポーネントで `$route` を使うとコンポーネントとルートの間に密結合が生まれ、コンポーネントが特定のURLでしか使用できないなど柔軟性が制限されます。

コンポーネントをルーターから分離するためにプロパティを使います:
コンポーネントをルーターから分離するために `props` オプションを使います:

**❌ $route に結合**
**❌ `$route` に結合**

``` js
const User = {
Expand All @@ -17,7 +17,7 @@ const router = new VueRouter({
})
```

**👍 プロパティによる分離**
**👍 `props` による分離**

``` js
const User = {
Expand All @@ -28,9 +28,9 @@ const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }

// 名前付きビューによるルートに対しては、名前付きビューごとに props オプションを定義しなければなりません:
// 名前付きビューによるルートに対しては、名前付きビューごとに `props` オプションを定義しなければなりません:
{
path: '/user/:id',
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
Expand All @@ -42,12 +42,11 @@ const router = new VueRouter({

### Boolean モード

props を true に設定すると、route.params がコンポーネントのプロパティとして設定されます。
`props``true` に設定すると、`route.params` がコンポーネントのプロパティとして設定されます。

### Object モード

props がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。
プロパティが静的なときに便利です。
`props` がオブジェクトの場合、これはコンポーネントプロパティとしてそのまま設定されます。プロパティが静的なときに便利です。

``` js
const router = new VueRouter({
Expand All @@ -59,8 +58,7 @@ const router = new VueRouter({

### Function モード

プロパティを返す関数を作成することができます。
これにより、パラメータを別のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。
プロパティを返す関数を作成することができます。これにより、パラメータを他のタイプにキャストし、静的な値をルートベースの値などと組み合わせることができます。

``` js
const router = new VueRouter({
Expand All @@ -70,8 +68,8 @@ const router = new VueRouter({
})
```

url `/search?q=vue` は `{query: "vue"}` をプロパティとして SearchUser コンポーネントに渡します。
URL `/search?q=vue` は `{query: 'vue'}` をプロパティとして `SearchUser` コンポーネントに渡します。

ルート変更時にのみ評価されるため、props 関数はステートレスにしてください。プロパティを定義するために状態を必要とする場合はラッパーコンポーネントを使用してください。その方法で vue は状態変更に対応することができます。
ルート変更時にのみ評価されるため、`props` 関数はステートレスにしてください。プロパティを定義するために状態を必要とする場合はラッパーコンポーネントを使用してください。その方法で vue は状態変更に対応することができます。

高度な使い方については、[example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)を参照してください。
4 changes: 2 additions & 2 deletions docs/ja/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)

<!--email_off-->
[Unpkg.com](https://unpkg.com) は NPM ベースの CDN リンクです。 上記のリンクは常に NPM 上の最新のリリースを指します。 `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js` のような URL を利用することで特定のバージョンやタグを指定することもできます。
[Unpkg.com](https://unpkg.com) は npm ベースの CDN リンクです。 上記のリンクは常に NPM 上の最新のリリースを指します。 `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js` のような URL を利用することで特定のバージョンやタグを指定することもできます。
<!--/email_off-->

Vue の後に `vue-router` を含めると自動的にインストールされます。
Expand All @@ -15,7 +15,7 @@ Vue の後に `vue-router` を含めると自動的にインストールされ
<script src="/path/to/vue-router.js"></script>
```

### NPM
### npm

``` bash
npm install vue-router
Expand Down