-
-
Notifications
You must be signed in to change notification settings - Fork 5k
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
update ja docs #2094
Changes from 4 commits
f91b12c
9d1bd1f
686ea65
a96c47e
4c33dae
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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/)で見つけることができます_ | ||
|
||
それから、このルート設定で上記のレイアウトを達成することができます: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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/)に見つけることができます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 上記コメントと同様の部分になります。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここの「見つけることができます」ですが、日本語ですと「見ることができます」くらいのほうがニュアンスとしてわかりやすそうですが、いかがでしょうか。
英語だと「you can find 」の部分です。