Skip to content

[doc][zh-cn] keep updates #1774

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 4 commits into from
Oct 3, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
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
4 changes: 2 additions & 2 deletions docs/zh-cn/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vue-router 2
<!--email_off-->
> 注意: vue-router@2.x 只适用于 Vue 2.x 版本。1.x 版本的文档在 [这里](https://github.com/vuejs/vue-router/tree/1.0/docs/en)。
> 注意: vue-router@2.x 只适用于 Vue 2.x。0.7.x 版本的文档请[移步这里](https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn)。
<!--/email_off-->
**[版本说明](https://github.com/vuejs/vue-router/releases)**

Expand All @@ -16,7 +16,7 @@
- [向路由组件传递 props](essentials/passing-props.md)
- [HTML5 History 模式](essentials/history-mode.md)
- 进阶
- [导航钩子](advanced/navigation-guards.md)
- [导航守卫](advanced/navigation-guards.md)
- [路由元信息](advanced/meta.md)
- [过渡动效](advanced/transitions.md)
- [数据获取](advanced/data-fetching.md)
Expand Down
37 changes: 17 additions & 20 deletions docs/zh-cn/advanced/data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

- **导航完成之后获取**:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

- **导航完成之前获取**:导航完成前,在路由的 `enter` 钩子中获取数据,在数据获取成功后执行导航。
- **导航完成之前获取**:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。

Expand Down Expand Up @@ -71,7 +71,7 @@ export default {

## 在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 `beforeRouteEnter` 钩子中获取数据,当数据获取成功后只调用 `next` 方法。
通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 `beforeRouteEnter` 守卫中获取数据,当数据获取成功后只调用 `next` 方法。

``` js
export default {
Expand All @@ -83,28 +83,25 @@ export default {
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
if (err) {
// display some global error message
next(false)
} else {
next(vm => {
vm.post = post
})
}
next(vm => vm.setData(err, post))
})
},
// 路由改变前,组件就已经渲染完了
// 逻辑稍稍不同
watch: {
$route () {
this.post = null
getPost(this.$route.params.id, (err, post) => {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}
Expand Down
23 changes: 10 additions & 13 deletions docs/zh-cn/advanced/lazy-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,29 @@

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

结合 Vue 的 [异步组件](http://vuejs.org/guide/components.html#Async-Components) 和 Webpack 的 [code splitting feature](https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/), 轻松实现路由组件的懒加载。

首先,可以将异步组件定义为返回一个 Promise 的工厂函数(该函数返回的Promise应该 resolve 组件本身):
结合 Vue 的[异步组件](https://cn.vuejs.org/guide/components.html#异步组件)和 Webpack 的[代码分割功能](https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/),轻松实现路由组件的懒加载。

首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

``` js
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
```

第二,在 webpack 2中,我们可以使用[动态 import](https://github.com/tc39/proposal-dynamic-import)语法来定义代码分块点(split point):
第二,在 Webpack 2 中,我们可以使用[动态 import](https://github.com/tc39/proposal-dynamic-import)语法来定义代码分块点 (split point)

``` js
import('./Foo.vue') // returns a Promise
import('./Foo.vue') // 返回 Promise
```

>注意:如果您使用的是 babel,你将需要添加[syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/)插件,才能使 babel 可以正确地解析语法
> 注意:如果您使用的是 Babel,你将需要添加 [`syntax-dynamic-import`](https://babeljs.io/docs/plugins/syntax-dynamic-import/) 插件,才能使 Babel 可以正确地解析语法

结合这两者,这就是如何定义一个能够被 webpack自动代码分割的异步组件
结合这两者,这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

``` js
const Foo = () => import('./Foo.vue')
```

在路由配置中什么都不需要改变,只需要像往常一样使用 `Foo`:
在路由配置中什么都不需要改变,只需要像往常一样使用 `Foo`

``` js
const router = new VueRouter({
Expand All @@ -35,16 +34,14 @@ const router = new VueRouter({
})
```


### 把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块(chunk)中。只需要使用 [命名 chunk](https://webpack.js.org/guides/code-splitting-require/#chunkname),一个特殊的注释语法来提供chunk name(需要webpack > 2.4)

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 [命名 chunk](https://webpack.js.org/guides/code-splitting-require/#chunkname),一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

``` js
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
```

webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
4 changes: 2 additions & 2 deletions docs/zh-cn/advanced/meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ const router = new VueRouter({

例如,根据上面的路由配置,`/foo/bar` 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 `$route` 对象(还有在导航钩子中的 route 对象)的 `$route.matched` 数组。因此,我们需要遍历 `$route.matched` 来检查路由记录中的 `meta` 字段。
一个路由匹配到的所有路由记录会暴露为 `$route` 对象(还有在导航守卫中的路有对象)的 `$route.matched` 数组。因此,我们需要遍历 `$route.matched` 来检查路由记录中的 `meta` 字段。

下面例子展示在全局导航钩子中检查 meta 字段
下面例子展示在全局导航守卫中检查元字段

``` js
router.beforeEach((to, from, next) => {
Expand Down
58 changes: 42 additions & 16 deletions docs/zh-cn/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
# 导航钩子
# 导航守卫

>(译者:『导航』表示路由正在发生改变。)

正如其名,`vue-router` 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
正如其名,`vue-router` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

### 全局钩子
记住**参数或查询的改变并不会触发进入/离开的导航守卫**。你可以通过[观察 `$route` 对象](../essentials/dynamic-matching.md#响应路由参数的变化)来应对这些变化,或使用 `beforeRouteUpdate` 的组件内守卫。

你可以使用 `router.beforeEach` 注册一个全局的 `before` 钩子:
### 全局守卫

你可以使用 `router.beforeEach` 注册一个全局前置守卫:

``` js
const router = new VueRouter({ ... })
Expand All @@ -16,9 +18,9 @@ router.beforeEach((to, from, next) => {
})
```

当一个导航触发时,全局的 `before` 钩子按照创建顺序调用。钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直处于 **等待中**。
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 **等待中**。

每个钩子方法接收三个参数
每个守卫方法接收三个参数

- **`to: Route`**: 即将要进入的目标 [路由对象](../api/route-object.md)

Expand All @@ -32,20 +34,29 @@ router.beforeEach((to, from, next) => {

- **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

- **`next(error)`**: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例,则导航会被终止且该错误会被传递给 `router.onError()` 注册过的回调。

**确保要调用 `next` 方法,否则钩子就不会被 resolved。**

### 全局解析守卫

> 2.5.0 新增

在 2.5.0+ 你可以用 `router.beforeResolve` 注册一个全局守卫。这和 `router.beforeEach` 类似,区别是在导航被确认之前,**同时在所有组件内守卫和异步路由组件被解析之后**,解析守卫就被调用。

### 全局后置钩子

同样可以注册一个全局的 `after` 钩子,不过它不像 `before` 钩子那样,`after` 钩子没有 `next` 方法,不能改变导航
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 `next` 函数也不会改变导航本身

``` js
router.afterEach(route => {
router.afterEach((to, from) => {
// ...
})
```

### 某个路由独享的钩子
### 路由独享的守卫

你可以在路由配置上直接定义 `beforeEnter` 钩子
你可以在路由配置上直接定义 `beforeEnter` 守卫

``` js
const router = new VueRouter({
Expand All @@ -61,11 +72,11 @@ const router = new VueRouter({
})
```

这些钩子与全局 `before` 钩子的方法参数是一样的
这些守卫与全局前置守卫的方法参数是一样的

### 组件内的钩子
### 组件内的守卫

最后,你可以在路由组件内直接定义以下路由导航钩子
最后,你可以在路由组件内直接定义以下路由导航守卫

- `beforeRouteEnter`
- `beforeRouteUpdate` (2.2 新增)
Expand All @@ -77,7 +88,7 @@ const Foo = {
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
   // 在当前路由改变,但是该组件被复用时调用
Expand All @@ -92,7 +103,7 @@ const Foo = {
}
```

`beforeRouteEnter` 钩子 **不能** 访问 `this`,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
`beforeRouteEnter` 守卫 **不能** 访问 `this`,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 `next`来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

Expand All @@ -104,4 +115,19 @@ beforeRouteEnter (to, from, next) {
}
```

你可以 在 `beforeRouteLeave` 中直接访问 `this`。这个 `leave` 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 `next(false)` 来取消导航。
你可以 在 `beforeRouteLeave` 中直接访问 `this`。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。可以通过 `next(false)` 来取消导航。

### 完整的导航解析流程

1. 导航被触发。
2. 在失活的组建里调用离开守卫。
3. 调用全局的 `beforeEach` 守卫。
4. 在重用的组件里调用 `beforeRouteUpdate` 守卫 (2.2+)。
5. 在路由配置里调用 `beforeEnter`。
6. 解析异步路由组件。
7. 在被激活的组件里调用 `beforeRouteEnter`。
8. 调用全局的 `beforeResolve` 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 `afterEach` 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数。
6 changes: 3 additions & 3 deletions docs/zh-cn/advanced/scroll-behavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ const router = new VueRouter({
这个方法返回滚动位置的对象信息,长这样:

- `{ x: number, y: number }`
- `{ selector: string }`
- `{ selector: string, offset? : { x: number, y: number }}` (offset 只在 2.6.0+ 支持)

如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。
如果返回一个 falsy (译者注:falsy 不是 `false`,[参考这里](https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy))的值,或者是一个空对象,那么不会发生滚动。

举例:

Expand Down Expand Up @@ -58,4 +58,4 @@ scrollBehavior (to, from, savedPosition) {
}
```

我们还可以利用 [路由元信息](meta.md) 更细颗粒度地控制滚动。查看完整例子 [这里](https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js).
我们还可以利用[路由元信息](meta.md)更细颗粒度地控制滚动。查看完整例子请[移步这里](https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js)
5 changes: 2 additions & 3 deletions docs/zh-cn/advanced/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@

`<router-view>` 是基本的动态组件,所以我们可以用 `<transition>` 组件给它添加一些过渡效果:


``` html
<transition>
<router-view></router-view>
</transition>
```

[`<transition>` 的所有功能](http://vuejs.org/guide/transitions.html) 在这里同样适用。
[`<transition>` 的所有功能](https://cn.vuejs.org/guide/transitions.html) 在这里同样适用。

### 单个路由的过渡

Expand Down Expand Up @@ -56,4 +55,4 @@ watch: {
}
```

查看完整例子 [这里](https://github.com/vuejs/vue-router/blob/next/examples/transitions/app.js).
查看完整例子请[移步这里](https://github.com/vuejs/vue-router/blob/next/examples/transitions/app.js)
8 changes: 4 additions & 4 deletions docs/zh-cn/api/component-injections.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

### 注入的属性


通过在 Vue 根实例的 `router` 配置传入 router 实例,下面这些属性成员会被注入到每个子组件。

- #### $router

router 实例.
router 实例

- #### $route

当前激活的 [路由信息对象](route-object.md)。这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它。
当前激活的[路由信息对象](route-object.md)。这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化)它。

### 允许的额外配置

- **beforeRouteEnter**
- **beforeRouteUpdate** (在 2.2 加入)
- **beforeRouteLeave**

查看 [组件级导航钩子](../advanced/navigation-guards.md#incomponent-guards).
查看[组件内的守卫](../advanced/navigation-guards.md#组件内的守卫)。
Loading