Skip to content

docs(zh): update #3178

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 1 commit into from
May 26, 2020
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
2 changes: 2 additions & 0 deletions docs/zh/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
对于 TypeScript 用户来说,`[email protected]+` 依赖 `[email protected]+`,反之亦然。
:::

<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">观看 Vue School 的关于 Vue Router 的免费视频课程 (英文)</a></div>

Vue Router 是 [Vue.js](http://cn.vuejs.org) 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

- 嵌套的路由/视图表
Expand Down
9 changes: 9 additions & 0 deletions docs/zh/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,13 @@ sidebar: auto

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 `linkExactActiveClass` 进行全局配置的。

### aria-current-value

- 类型: `'page' | 'step' | 'location' | 'date' | 'time'`
- 默认值: `"page"`

当链接根据精确匹配规则激活时配置的 `aria-current` 的值。这个值应该是 ARIA 规范中[允许的 aria-current 的值](https://www.w3.org/TR/wai-aria-1.2/#aria-current)。在绝大多数场景下,默认值 `page` 应该是最合适的。

## `<router-view>`

`<router-view>` 组件是一个 functional 组件,渲染路径匹配到的视图组件。`<router-view>` 渲染的组件还可以内嵌自己的 `<router-view>`,根据嵌套路径,渲染嵌套组件。
Expand Down Expand Up @@ -288,6 +295,8 @@ sidebar: auto

- 类型: `boolean`

- 默认值: `true`

当浏览器不支持 `history.pushState` 控制路由是否应该回退到 `hash` 模式。默认值为 `true`。

在 IE9 中,设置为 `false` 会使得每个 `router-link` 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
同时,所有的例子都将使用完整版的 Vue 以解析模板。更多细节请[移步这里](https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时)。
:::

<div class="vueschool"><a href="https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to build powerful Single Page Applications with the Vue Router on Vue School">观看 Vue School 的关于 Vue Router 的免费视频课程 (英文)</a></div>

用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子:

## HTML
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/advanced/lazy-loading.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 路由懒加载

<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-lazy-load-routes-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to increase performance by lazy loading routes on Vue School">观看 Vue School 的如何路由懒加载的免费视频课程 (英文)</a></div>

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

结合 Vue 的[异步组件](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#异步组件)和 Webpack 的[代码分割功能](https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/),轻松实现路由组件的懒加载。
Expand Down
23 changes: 21 additions & 2 deletions docs/zh/guide/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

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

<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-configure-an-authentication-middleware-route-guard-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to create an authentication middleware with a global route guard on Vue School">观看 Vue School 的导航守卫如何工作的免费视频课程 (英文)</a></div>

## 全局前置守卫

你可以使用 `router.beforeEach` 注册一个全局前置守卫:
Expand Down Expand Up @@ -38,7 +40,24 @@ router.beforeEach((to, from, next) => {

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

**确保要调用 `next` 方法,否则钩子就不会被 resolved。**
**确保 `next` 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。**这里有一个在用户未能验证身份时重定向到 `/login` 的示例:

```js
// BAD
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
// 如果用户未能验证身份,则 `next` 会被调用两次
next()
})
```

```js
// GOOD
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
```

## 全局解析守卫

Expand Down Expand Up @@ -143,7 +162,7 @@ beforeRouteLeave (to, from, next) {
## 完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫
2. 在失活的组件里调用 `beforeRouteLeave` 守卫
3. 调用全局的 `beforeEach` 守卫。
4. 在重用的组件里调用 `beforeRouteUpdate` 守卫 (2.2+)。
5. 在路由配置里调用 `beforeEnter`。
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/advanced/scroll-behavior.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 滚动行为

<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-control-the-scroll-behavior-of-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to control the scroll behavior on Vue School">观看 Vue School 的如何控制滚动行为的免费视频课程 (英文)</a></div>

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 `vue-router` 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

**注意: 这个功能只在支持 `history.pushState` 的浏览器中可用。**
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/advanced/transitions.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 过渡动效

<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-create-route-transitions-with-vue-router?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to create route transitions on Vue School">观看 Vue School 的如何创建路由过渡动效的免费视频课程 (英文)</a></div>

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

``` html
Expand Down
18 changes: 10 additions & 8 deletions docs/zh/guide/essentials/dynamic-matching.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# 动态路由匹配

<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-dynamic-routes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to match dynamic routes with Vue School">观看 Vue School 的如何匹配动态路由的免费视频课程 (英文)</a></div>

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 `User` 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 `vue-router` 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:

``` js
```js
const User = {
template: '<div>User</div>'
}
Expand All @@ -20,7 +22,7 @@ const router = new VueRouter({
一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时,参数值会被设置到
`this.$route.params`,可以在每个组件内使用。于是,我们可以更新 `User` 的模板,输出当前用户的 ID:

``` js
```js
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
Expand All @@ -31,8 +33,8 @@ const User = {
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到 `$route.params` 中。例如:

| 模式 | 匹配路径 | $route.params |
|---------|------|--------|
| /user/:username | /user/evan | `{ username: 'evan' }` |
| ----------------------------- | ------------------- | -------------------------------------- |
| /user/:username | /user/evan | `{ username: 'evan' }` |
| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: '123' }` |

除了 `$route.params` 外,`$route` 对象还提供了其它有用的信息,例如,`$route.query` (如果 URL 中有查询参数)、`$route.hash` 等等。你可以查看 [API 文档](../../api/#路由对象) 的详细说明。
Expand All @@ -43,11 +45,11 @@ const User = {

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) `$route` 对象:

``` js
```js
const User = {
template: '...',
watch: {
'$route' (to, from) {
$route(to, from) {
// 对路由变化作出响应...
}
}
Expand All @@ -56,7 +58,7 @@ const User = {

或者使用 2.2 中引入的 `beforeRouteUpdate` [导航守卫](../advanced/navigation-guards.html):

``` js
```js
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
Expand Down Expand Up @@ -96,7 +98,7 @@ this.$route.params.pathMatch // '/non-existing'

## 高级匹配模式

`vue-router` 使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0) 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。查看它的 [文档](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters) 学习高阶的路径匹配,还有 [这个例子 ](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) 展示 `vue-router` 怎么使用这类匹配。
`vue-router` 使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0) 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。查看它的[文档](https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters)学习高阶的路径匹配,还有[这个例子 ](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js)展示 `vue-router` 怎么使用这类匹配。

## 匹配优先级

Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ const router = new VueRouter({

## 后端配置例子

**注意**:下列示例假设你在根目录服务这个应用。如果想部署到一个子目录,你需要使用 [Vue CLI 的 `publicPath` 选项](https://cli.vuejs.org/zh/config/#publicpath) 和相关的 [router `base` property](https://router.vuejs.org/zh/api/#base)。你还需要把下列示例中的根目录调整成为子目录 (例如用 `RewriteBase /name-of-your-subfolder/` 替换掉 `RewriteBase /`)。

#### Apache

```apache
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/essentials/named-routes.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 命名路由

<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-named-routes-and-params?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to work with named routes and params with Vue School">观看 Vue School 的如何使用命名路由及其参数的免费视频课程 (英文)</a></div>

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 `routes` 配置中给某个路由设置名称。

``` js
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/essentials/nested-routes.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 嵌套路由

<div class="vueschool"><a href="https://vueschool.io/lessons/vue-router-nested-routes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to work with nested routes with Vue School">观看 Vue School 的如何使用嵌套路由的免费视频课程 (英文)</a></div>

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:

```
Expand Down
2 changes: 2 additions & 0 deletions docs/zh/guide/essentials/passing-props.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 路由组件传参

<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-pass-vue-router-params-as-props-to-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to pass props to route components with Vue School">观看 Vue School 的如何向路由组件传递 prop 的免费视频课程 (英文)</a></div>

在组件中使用 `$route` 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

使用 `props` 将组件和路由解耦:
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/essentials/redirect-and-alias.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const router = new VueRouter({
})
```

注意[导航守卫](../advanced/navigation-guards.md)并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 `/a` 路由添加一个 `beforeEach` 或 `beforeLeave` 守卫并不会有任何效果。
注意[导航守卫](../advanced/navigation-guards.md)并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 `/a` 路由添加一个 `beforeEach` 守卫并不会有任何效果。

其它高级用法,请参考[例子](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js)。

Expand Down