docs: add example of nested named routes (#1931)

* docs: add example of nested named routes Closes #1921 * docs: add link of jsfiddle in note * review * [skip ci] review
vuejs · Jan 10, 2018 · 9e78ca2 · 9e78ca2
1 parent 81e6ce0
commit 9e78ca2
Showing 1 changed file with 57 additions and 0 deletions.
diff --git 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 `<template>` section for `UserSettings` component in the above layout would look something like this:
+
+```html
+<!-- UserSettings.vue -->
+<div>
+  <h1>User Settings</h1>
+  <NavBar/>
+  <router-view/>
+  <router-view name="helper"/>
+</div>
+```
+
+_The nested view components are omitted here but you can find the complete source code for the example above [here](https://jsfiddle.net/posva/22wgksa3/)_
+
+Then you can achieve the layout above with this route configuration:
+
+```js
+{ path: '/settings',
+  // You could also have named views at the top
+  component: UserSettings,
+  children: [{
+    path: 'emails',
+    component: UserEmailsSubscriptions
+  }, {
+    path: 'profile',
+    components: {
+      default: UserProfile,
+      helper: UserProfilePreview
+    }
+  }]
+}
+```
+
+A working demo of this example can be found [here](https://jsfiddle.net/posva/22wgksa3/).