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` 组件的 `