diff --git a/docs/ja/api/route-object.md b/docs/ja/api/route-object.md index 1cbd03985..143ba6a75 100644 --- a/docs/ja/api/route-object.md +++ b/docs/ja/api/route-object.md @@ -85,3 +85,7 @@ - **$route.name** 名前がある場合の現在のルートの名前です。(詳しくは [名前付きルート](../essentials/named-routes.md) をご参照ください) + +- **$route.redirectedFrom** + + もしあれば、リダイレクト元の名前。(参照[リダイレクトとエイリアス](../essentials/redirect-and-alias.md)) diff --git a/docs/ja/essentials/named-views.md b/docs/ja/essentials/named-views.md index d5f9b1e2c..7cc117cab 100644 --- a/docs/ja/essentials/named-views.md +++ b/docs/ja/essentials/named-views.md @@ -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` コンポーネントの `