From bbed9a048fa359e047fa7bc75dc1c73fb4a1fe16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= <zhaojinjiang@me.com>
Date: Tue, 16 Jan 2018 00:43:53 +0800
Subject: [PATCH] [docs][zh-cn] sync recent udpates to #9e78ca2 (#1984)

* [docs][zh-cn] sync recent udpates to #9e78ca2

* Update named-views.md
---
 docs/zh-cn/advanced/navigation-guards.md |  2 +-
 docs/zh-cn/essentials/named-views.md     | 58 ++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/docs/zh-cn/advanced/navigation-guards.md b/docs/zh-cn/advanced/navigation-guards.md
index 91d8ba13f..f416c3e34 100644
--- a/docs/zh-cn/advanced/navigation-guards.md
+++ b/docs/zh-cn/advanced/navigation-guards.md
@@ -34,7 +34,7 @@ router.beforeEach((to, from, next) => {
 
   - **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 `next` 传递任意位置对象，且允许设置诸如 `replace: true`、`name: 'home'` 之类的选项以及任何用在 [`router-link` 的 `to` prop](../api/router-link.md) 或 [`router.push`](../api/router-instance.md#方法) 中的选项。
 
-  - **`next(error)`**: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例，则导航会被终止且该错误会被传递给 `router.onError()` 注册过的回调。
+  - **`next(error)`**: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例，则导航会被终止且该错误会被传递给 [`router.onError()`](../api/router-instance.html#方法) 注册过的回调。
 
 **确保要调用 `next` 方法，否则钩子就不会被 resolved。**
 
diff --git a/docs/zh-cn/essentials/named-views.md b/docs/zh-cn/essentials/named-views.md
index 07cfa7dc5..3362c3ce6 100644
--- a/docs/zh-cn/essentials/named-views.md
+++ b/docs/zh-cn/essentials/named-views.md
@@ -26,3 +26,61 @@ 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` 是嵌套的视图组件。
+
+**注意**：_我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上_
+
+`UserSettings` 组件的 `<template>` 部分应该是类似下面的这段代码：
+
+```html
+<!-- UserSettings.vue -->
+<div>
+  <h1>User Settings</h1>
+  <NavBar/>
+  <router-view/>
+  <router-view name="helper"/>
+</div>
+```
+
+_嵌套的视图组件在此已经被忽略了，但是你可以在[这里](https://jsfiddle.net/posva/22wgksa3/)找到完整的源代码_
+
+然后你可以用这个路由配置完成该布局：
+
+```js
+{
+  path: '/settings',
+  // 你也可以在顶级路由就配置命名视图
+  component: UserSettings,
+  children: [{
+    path: 'emails',
+    component: UserEmailsSubscriptions
+  }, {
+    path: 'profile',
+    components: {
+      default: UserProfile,
+      helper: UserProfilePreview
+    }
+  }]
+}
+```
+
+一个可以工作的示例的 demo 在[这里](https://jsfiddle.net/posva/22wgksa3/)。