diff --git a/docs/en/essentials/named-views.md b/docs/en/essentials/named-views.md index e72317803..b964fdb71 100644 --- a/docs/en/essentials/named-views.md +++ b/docs/en/essentials/named-views.md @@ -27,3 +27,60 @@ const router = new VueRouter({ ``` A working demo of this example can be found [here](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 `