Skip to content

Commit 4a9470e

Browse files
authored
update ja docs (vuejs#2094)
* docs(ja): pick up from added named view docs ref: vuejs@9e78ca2 * docs(ja): translate named view section * docs(ja): add new api docs to route-object ref: vuejs@768f6b7 * docs(ja): translate route-object api * docs(ja): fix review comments
1 parent 9e4aa54 commit 4a9470e

File tree

2 files changed

+61
-0
lines changed

2 files changed

+61
-0
lines changed

docs/ja/api/route-object.md

+4
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,7 @@
8585
- **$route.name**
8686

8787
名前がある場合の現在のルートの名前です。(詳しくは [名前付きルート](../essentials/named-routes.md) をご参照ください)
88+
89+
- **$route.redirectedFrom**
90+
91+
もしあれば、リダイレクト元の名前。(参照[リダイレクトとエイリアス](../essentials/redirect-and-alias.md))

docs/ja/essentials/named-views.md

+57
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,60 @@ const router = new VueRouter({
2727

2828
この例の動作しているデモは
2929
[こちら](https://jsfiddle.net/posva/6du90epg/) です。
30+
31+
## ネストされた名前付きビュー
32+
33+
ネストされたビューを持つ名前付きビューを使用して複雑なレイアウトを作成することができます。そうする際に、ネストされた `router-view` コンポーネントを使用するために名前をつける必要があります。設定パネルの例を見てみましょう:
34+
35+
```
36+
/settings/emails /settings/profile
37+
+-----------------------------------+ +------------------------------+
38+
| UserSettings | | UserSettings |
39+
| +-----+-------------------------+ | | +-----+--------------------+ |
40+
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
41+
| | +-------------------------+ | | | +--------------------+ |
42+
| | | | | | | | UserProfilePreview | |
43+
| +-----+-------------------------+ | | +-----+--------------------+ |
44+
+-----------------------------------+ +------------------------------+
45+
```
46+
47+
- `Nav` は普通のコンポーネントです
48+
- `UserSettings` はビューコンポーネントです
49+
- `UserEmailsSubscriptions``UserProfile``UserProfilePreview` はネストされたビューコンポーネントです
50+
51+
**Note**: _そのようなレイアウトに HTML/CSS がどのように表示されるのか、そして使用されるコンポーネントに焦点を当てる方法については、ここでは忘れましょう_
52+
53+
上記レイアウトでの `UserSettings` コンポーネントの `<template>` セクションは次のようになります:
54+
55+
```html
56+
<!-- UserSettings.vue -->
57+
<div>
58+
<h1>User Settings</h1>
59+
<NavBar/>
60+
<router-view/>
61+
<router-view name="helper"/>
62+
</div>
63+
```
64+
65+
_ここではネストされたビューコンポーネントは省略されていますが、上記例の完全なソースコードを[ここ](https://jsfiddle.net/posva/22wgksa3/)で見ることができます_
66+
67+
それから、以下のルート設定で上記のレイアウトを表現することができます:
68+
69+
```js
70+
{ path: '/settings',
71+
// トップで名前付きビューを持つこともできます
72+
component: UserSettings,
73+
children: [{
74+
path: 'emails',
75+
component: UserEmailsSubscriptions
76+
}, {
77+
path: 'profile',
78+
components: {
79+
default: UserProfile,
80+
helper: UserProfilePreview
81+
}
82+
}]
83+
}
84+
```
85+
86+
この例の動作するデモは、[ここ](https://jsfiddle.net/posva/22wgksa3/)に見ることができます。

0 commit comments

Comments
 (0)