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 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: 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/)で見ることができます_

それから、以下のルート設定で上記のレイアウトを表現することができます:

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

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