Skip to content

update ja docs #2094

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 5 commits into from
Mar 8, 2018
Merged
Show file tree
Hide file tree
Changes from 4 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: 4 additions & 0 deletions docs/ja/api/route-object.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,7 @@
- **$route.name**

名前がある場合の現在のルートの名前です。(詳しくは [名前付きルート](../essentials/named-routes.md) をご参照ください)

- **$route.redirectedFrom**

もしあれば、リダイレクト元の名前。(参照[リダイレクトとエイリアス](../essentials/redirect-and-alias.md))
57 changes: 57 additions & 0 deletions docs/ja/essentials/named-views.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,60 @@ const router = new VueRouter({

この例の動作しているデモは
[こちら](https://jsfiddle.net/posva/6du90epg/) です。

## ネストされた名前付きビュー

ネストされたビューを持つ名前付きビューを使用して複雑なレイアウトを作成することができます。そうする際に、ネストされた `router-view` コンポーネントを使用するために名前をつける必要があります。設定パネルの例を見てみましょう:

```
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
```

- `Nav` は普通のコンポーネントです
- `UserSettings` はビューコンポーネントです
- `UserEmailsSubscriptions` 、`UserProfile` 、`UserProfilePreview` はネストされたビューコンポーネントです

**Note**: _そのようなレイアウトに HTML/CSS がどのように表示されるのか、そして使用されるコンポーネントに焦点を当てる方法については、ここでは忘れましょう_

上記レイアウトでの `UserSettings` コンポーネントの `<template>` セクションは次のようになります:

```html
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
```

_ここではネストされたビューコンポーネントは省略されていますが、上記例の完全なソースコードを[ここ](https://jsfiddle.net/posva/22wgksa3/)で見つけることができます_
Copy link

@ykhirao ykhirao Mar 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここの「見つけることができます」ですが、日本語ですと「見ることができます」くらいのほうがニュアンスとしてわかりやすそうですが、いかがでしょうか。

英語だと「you can find 」の部分です。


それから、このルート設定で上記のレイアウトを達成することができます:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここの「達成」ですが、確かに achieve をそのまま訳すとすると正しいのですが、あまり日本語として読みやすくない気がします。

ですので、「その後、このルート設定で上記のレイアウトを表現できることができます」のほうが良さそうかなーと思いますがどうでしょうか。
(日本語だと「下記の」と書けるところが原文が「この」になっているのも相まってなかなか複雑になってしまいますね 😅)


```js
{ path: '/settings',
// トップで名前付きビューを持つこともできます
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
```

この例の動作するデモは、[ここ](https://jsfiddle.net/posva/22wgksa3/)に見つけることができます。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

上記コメントと同様の部分になります。