From f91b12cdfaa7c8fbe2dac004d078e1958158480d Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Thu, 8 Mar 2018 11:32:38 +0900 Subject: [PATCH 1/5] docs(ja): pick up from added named view docs ref: https://github.com/vuejs/vue-router/commit/9e78ca2ff5dcba5cc23629d870cba2e2367b4a86 --- docs/ja/essentials/named-views.md | 57 +++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/docs/ja/essentials/named-views.md b/docs/ja/essentials/named-views.md index d5f9b1e2c..a3f994273 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/) です。 + +## Nested Named Views + +It is possible to create complex layouts using named views with nested views. When doing so, you will also need to name nested `router-view` components used. Let's take a Settings panel example: + +``` +/settings/emails /settings/profile ++-----------------------------------+ +------------------------------+ +| UserSettings | | UserSettings | +| +-----+-------------------------+ | | +-----+--------------------+ | +| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | +| | +-------------------------+ | | | +--------------------+ | +| | | | | | | | UserProfilePreview | | +| +-----+-------------------------+ | | +-----+--------------------+ | ++-----------------------------------+ +------------------------------+ +``` + +- `Nav` is just a regular compnonent +- `UserSettings` is the view comopnent +- `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` are nested view components + +**Note**: _Let's forget about how the HTML/CSS should look like to represent such layout and focus on the components used_ + +The `