translate into zh-cn (#701)

* translate into zh-cn

* Fix docs/zh-cn according to #701#issuecomment-250633734

Author: zhenyong

docs/zh-cn/README.md

@@ -0,0 +1 @@
+SUMMARY.md

docs/zh-cn/SUMMARY.md

@@ -0,0 +1,29 @@
+# vue-router 2
+
+> 注意: vue-router@2.x 只适用于 Vue 2.x 版本。1.x 版本的文档在 [这里](https://github.com/vuejs/vue-router/tree/1.0/docs/en)。
+
+- [版本说明](https://github.com/vuejs/vue-router/releases)
+- [安装](installation.md)
+- 基础
+  - [开始](essentials/getting-started.md)
+  - [动态路由匹配](essentials/dynamic-matching.md)
+  - [嵌套路由](essentials/nested-routes.md)
+  - [编程式导航](essentials/navigation.md)
+  - [命名路由](essentials/named-routes.md)
+  - [命名视图](essentials/named-views.md)
+  - [重定向 和 别名](essentials/redirect-and-alias.md)
+  - [HTML5 History 模式](essentials/history-mode.md)
+- 进阶
+  - [导航钩子](advanced/navigation-guards.md)
+  - [路由元信息](advanced/meta.md)
+  - [过渡动效](advanced/transitions.md)
+  - [数据获取](advanced/data-fetching.md)
+  - [滚动行为](advanced/scroll-behavior.md)
+  - [懒加载](advanced/lazy-loading.md)
+- API 文档
+  - [router-link](api/router-link.md)
+  - [router-view](api/router-view.md)
+  - [路由信息对象](api/route-object.md)
+  - [Router 构造配置](api/options.md)
+  - [Router 实例](api/router-instance.md)
+  - [对组件注入](api/component-injections.md)

docs/zh-cn/advanced/data-fetching.md

@@ -0,0 +1,113 @@
+# 数据获取
+
+有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：
+
+- **导航完成之后获取**：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
+
+- **导航完成之前获取**：导航完成前，在路由的 `enter` 钩子中获取数据，在数据获取成功后执行导航。
+
+从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。
+
+## 导航完成后获取数据
+
+当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 `create` 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
+
+假设我们有一个 `Post` 组件，需要基于 `$route.params.id` 获取文章数据：
+
+``` html
+<template>
+  <div class="post">
+    <div class="loading" v-if="loading">
+      Loading...
+    </div>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+``` js
+export default {
+  data () {
+    return {
+      loading: false,
+      post: null,
+      error: null
+    }
+  },
+  created () {
+    // 组件创建完后获取数据，
+    // 此时 data 已经被 observed 了
+    this.fetchData()
+  },
+  watch: {
+    // 如果路由有变化，会再次执行该方法
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData () {
+      this.error = this.post = null
+      this.loading = true
+      // replace getPost with your data fetching util / API wrapper
+      getPost(this.$route.params.id, (err, post) => {
+        this.loading = false
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+## 在导航完成前获取数据
+
+通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的  `beforeRouteEnter` 钩子中获取数据，当数据获取成功后只调用 `next` 方法。
+
+``` js
+export default {
+  data () {
+    return {
+      post: null,
+      error: null
+    }
+  },
+  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
+        })
+      }
+    })
+  },
+  // 路由改变前，组件就已经渲染完了
+  // 逻辑稍稍不同
+  watch: {
+    $route () {
+      this.post = null
+      getPost(this.$route.params.id, (err, post) => {
+        if (err) {
+          this.error = err.toString()
+        } else {
+          this.post = post
+        }
+      })
+    }
+  }
+}
+```
+
+在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

docs/zh-cn/advanced/lazy-loading.md

@@ -0,0 +1,45 @@
+# 路由懒加载
+
+当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
+
+结合 Vue 的 [异步组件](http://vuejs.org/guide/components.html#Async-Components) 和 Webpack 的 [code splitting feature](https://webpack.github.io/docs/code-splitting.html), 轻松实现路由组件的懒加载。
+
+我们要做的就是把路由对应的组件定义成异步组件：
+
+``` js
+const Foo = resolve => {
+  // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
+  // （代码分块）
+  require.ensure(['./Foo.vue'], () => {
+    resolve(require('./Foo.vue'))
+  })
+}
+```
+
+这里还有另一种代码分块的语法，使用 AMD 风格的 require，于是就更简单了：
+
+``` js
+const Foo = resolve => require(['./Foo.vue'], resolve)
+```
+
+不需要改变任何路由配置，跟之前一样使用 `Foo`：
+
+``` js
+const router = new VueRouter({
+  routes: [
+    { path: '/foo', component: Foo }
+  ]
+})
+```
+
+### 把组件按组分块
+
+有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 [给 chunk 命名](https://webpack.github.io/docs/code-splitting.html#named-chunks)，提供 `require.ensure` 第三个参数作为 chunk 的名称:
+
+``` js
+const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
+const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
+const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
+```
+
+Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 `require.ensure` 的依赖（传空数组就行）。

docs/zh-cn/advanced/meta.md

@@ -0,0 +1,51 @@
+# 路由元信息
+
+定义路由的时候可以配置 `meta` 字段：
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      children: [
+        {
+          path: 'bar',
+          component: Bar,
+          // a meta field
+          meta: { requiresAuth: true }
+        }
+      ]
+    }
+  ]
+})
+```
+
+那么如何访问这个 `meta` 字段呢？
+
+首先，我们称呼 `routes` 配置中的每个路由对象为 **路由记录**。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录
+
+例如，根据上面的路由配置，`/foo/bar` 这个 URL 将会匹配父路由记录以及子路由记录。
+
+一个路由匹配到的所有路由记录会暴露为 `$route` 对象（还有在导航钩子中的 route 对象）的 `$route.matched` 数组。因此，我们需要遍历 `$route.matched` 来检查路由记录中的 `meta` 字段。
+
+下面例子展示在全局导航钩子中检查 meta 字段：
+
+``` js
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // this route requires auth, check if logged in
+    // if not, redirect to login page.
+    if (!auth.loggedIn()) {
+      next({
+        path: '/login',
+        query: { redirect: to.fullPath }
+      })
+    } else {
+      next()
+    }
+  } else {
+    next() // 确保一定要调用 next()
+  }
+})
+```

docs/zh-cn/advanced/navigation-guards.md

@@ -0,0 +1,97 @@
+# 导航钩子
+
+>（译者：『导航』表示路由正在发生改变。）
+
+正如其名，`vue-router` 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
+
+### 全局钩子
+
+你可以使用 `router.beforeEach` 注册一个全局的 `before` 钩子：
+
+``` js
+const router = new VueRouter({ ... })
+
+router.beforeEach((to, from, next) => {
+  // ...
+})
+```
+
+当一个导航触发时，全局的 `before` 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 **等待中**。
+
+每个钩子方法接收三个参数：
+
+- **`to: Route`**: 即将要进入的目标 [路由对象](../api/route-object.md)
+
+- **`from: Route`**: 当前导航正要离开的路由
+
+- **`next: Function`**: 一定要调用该方法来 **resolve** 这个钩子。执行效果依赖 `next` 方法的调用参数。
+
+  - **`next()`**: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 **confirmed** （确认的）。
+
+  - **`next(false)`**: 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 `from` 路由对应的地址。
+
+  - **`next('/')` 或者 `next({ path: '/' })`**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
+
+**确保要调用 `next` 方法，否则钩子就不会被 resolved。**
+
+
+同样可以注册一个全局的 `after` 钩子，不过它不像 `before` 钩子那样，`after` 钩子没有 `next` 方法，不能改变导航：
+
+``` js
+router.afterEach(route => {
+  // ...
+})
+```
+
+### 某个路由独享的钩子
+
+你可以在路由配置上直接定义 `beforeEnter` 钩子：
+
+``` js
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/foo',
+      component: Foo,
+      beforeEnter: (to, from, next) => {
+        // ...
+      }
+    }
+  ]
+})
+```
+
+这些钩子与全局 `before` 钩子的方法参数是一样的。
+
+### 组件内的钩子
+
+最后，你可以使用 `beforeRouteEnter` 和 `beforeRouteLeave`，在路由组件内直接定义路由导航钩子，
+
+``` js
+const Foo = {
+  template: `...`,
+  beforeRouteEnter (to, from, next) => {
+    // 在渲染该组件的对应路由被 confirm 前调用
+    // 不！能！获取组件实例 `this`
+    // 因为当钩子执行前，组件实例还没被创建
+  },
+  beforeRouteLeave (to, from, next) => {
+    // 导航离开该组件的对应路由时调用
+    // 可以访问组件实例 `this`
+  }
+}
+```
+
+`beforeRouteEnter` 钩子 **不能** 访问 `this`，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
+
+不过，你可以通过传一个回调给 `next`来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
+
+``` js
+beforeRouteEnter (to, from, next) => {
+  next(vm => {
+    // 通过 `vm` 访问组件实例
+  })
+}
+```
+
+你可以 在 `beforeRouteLeave` 中直接访问 `this`。这个 `leave` 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 `next(false)` 来取消导航。