Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 15, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/zh-cn/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
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
57 changes: 57 additions & 0 deletions docs/zh-cn/essentials/named-views.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,60 @@ 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',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个 { 后面应该要换行吧

Copy link
Member

@posva posva Jan 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was my bad 😅
Is everything else fine?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it's cool.

// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
```

一个可以工作的示例的 demo 在[这里](https://jsfiddle.net/posva/22wgksa3/)。