Skip to content

Commit

Permalink
[docs][zh-cn] sync recent udpates to #9e78ca2 (#1984)
Browse files Browse the repository at this point in the history
* [docs][zh-cn] sync recent udpates to #9e78ca2

* Update named-views.md
  • Loading branch information
Jinjiang authored and posva committed Jan 15, 2018
1 parent 6480339 commit bbed9a0
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/zh-cn/advanced/navigation-guards.md
Expand Up @@ -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。**

Expand Down
58 changes: 58 additions & 0 deletions docs/zh-cn/essentials/named-views.md
Expand Up @@ -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/)

0 comments on commit bbed9a0

Please sign in to comment.