Skip to content

Commit 1fa4115

Browse files
gbezyukyyx990803
authored andcommitted
[DONE][2.1.1][MERGE ME][Doc] Russian Translation (#944)
* add entry for Russian docs * copy en docs for ru translation * translation for ru/installation.md * ru/README.md translation * ru/SUMMARY.md translation (same as README.md) * ru/essentials/getting-started.md ru translation * ru/essentials/dynamic-matching.md ru translation * ru/essentials/nested-routes.md ru translation * ru/essentials/navigation.md ru translation * ru/essentials/named-routes.md ru translation * ru/essentials/named-views.md ru translation * ru/essentials/redirect-and-alias.md ru translation * ru/essentials/history-mode.md ru translation * ru/advanced/navigation-guards.md translation * ru/advanced/meta.md translation * ru/advanced/transitions.md translation * ru/advanced/data-fetching.md translation * ru/advanced/scroll-behavior.md translation * ru/advanced/lazy-loading.md translation * README.md and SUMMARY.md translation updates * ru/api/component-injections.md translation * ru/api/options.md translation * ru/api/route-object.md translation * ru/api/router-instance.md translation * ru/api/router-view.md translation * ru/api/router-link.md translation * Update scroll-behavior.md * ru/essentials proof-reading * ru/advanced proof-reading * ru/api proof-reading * updated to match 2.1.1 * Typofix
1 parent 4a4c440 commit 1fa4115

24 files changed

+1357
-0
lines changed

docs/LANGS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
* [2.0 - English](en/)
22
* [2.0 - Japanese](ja/)
33
* [2.0 - 中文](zh-cn/)
4+
* [2.0 - Русский](ru/)
45
* [0.7 Docs](old/)

docs/ru/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{% include "./SUMMARY.md" %}

docs/ru/SUMMARY.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# vue-router 2
2+
<!--email_off-->
3+
> Обратите внимание: vue-router@2.x работает только с Vue 2.x. Документация для версии 0.7.x находится [здесь (en)](https://github.com/vuejs/vue-router/tree/1.0/docs/en).
4+
<!--/email_off-->
5+
**[Release Notes](https://github.com/vuejs/vue-router/releases)**
6+
7+
- [Установка](installation.md)
8+
- Основы
9+
- [Начало работы](essentials/getting-started.md)
10+
- [Динамические пути](essentials/dynamic-matching.md)
11+
- [Вложенные пути](essentials/nested-routes.md)
12+
- [Императивная навигация](essentials/navigation.md)
13+
- [Именованные пути](essentials/named-routes.md)
14+
- [Именованные представления](essentials/named-views.md)
15+
- [Редиректы и псевдонимы](essentials/redirect-and-alias.md)
16+
- [Режим HTML5 History](essentials/history-mode.md)
17+
- Продвинутые возможности
18+
- [Сторожевые хуки](advanced/navigation-guards.md)
19+
- [Метаданные путей](advanced/meta.md)
20+
- [Анимация переходов](advanced/transitions.md)
21+
- [Запросы данных](advanced/data-fetching.md)
22+
- [Скроллинг](advanced/scroll-behavior.md)
23+
- [Ленивая загрузка путей](advanced/lazy-loading.md)
24+
- Справочник API
25+
- [router-link](api/router-link.md)
26+
- [router-view](api/router-view.md)
27+
- [Объект Route](api/route-object.md)
28+
- [Опции конструктора Router'а](api/options.md)
29+
- [Инстанс Router'а](api/router-instance.md)
30+
- [Интеграция с компонентами Vue](api/component-injections.md)

docs/ru/advanced/data-fetching.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# Запросы данных
2+
3+
Нередко при переходе между путями требуется получить от сервера какие-либо данные. Например, перед отображением профиля пользователя нужно запросить данные о нём. Этой цели можно достичь двумя различными путями:
4+
5+
- **Запросив данные после перехода**: сначала перейти к новому пути, затем запросить данные в хуке жизненного цикла целевого компонента. По мере загрузки данных отобразить индикатор состояния загрузки.
6+
7+
- **Запросив данные перед переходом**: запросить данные в сторожевом хуке роутера, и завершить навигацию уже по когда они будут получены.
8+
9+
С технической точки зрения, оба способа годятся — выбор зависит от того, какой UX вы хотите получить.
10+
11+
## Запрос данных после перехода
12+
13+
При использовании этого подхода, мы осуществляем переход и рендеринг целевого компонента сразу же, а данные запрашиваем в хуке `created` компонента. Это позволяет нам отобразить состояние загрузки, пока данные подтягиваются по сети, причём имея возможность сделать это различным образом для разных компонентов.
14+
15+
Предположим, у нас есть компонент `Post`, которому требуется загрузить с сервера данные, соответствующие id поста из `$route.params.id`:
16+
17+
``` html
18+
<template>
19+
<div class="post">
20+
<div class="loading" v-if="loading">
21+
Loading...
22+
</div>
23+
24+
<div v-if="error" class="error">
25+
{{ error }}
26+
</div>
27+
28+
<div v-if="post" class="content">
29+
<h2>{{ post.title }}</h2>
30+
<p>{{ post.body }}</p>
31+
</div>
32+
</div>
33+
</template>
34+
```
35+
36+
``` js
37+
export default {
38+
data () {
39+
return {
40+
loading: false,
41+
post: null,
42+
error: null
43+
}
44+
},
45+
created () {
46+
// запрашиваем данные когда реактивное представление уже создано
47+
this.fetchData()
48+
},
49+
watch: {
50+
// в случае изменения маршрута запрашиваем данные вновь
51+
'$route': 'fetchData'
52+
},
53+
methods: {
54+
fetchData () {
55+
this.error = this.post = null
56+
this.loading = true
57+
// замените здесь getPost используемым методом получения данных / доступа к API
58+
getPost(this.$route.params.id, (err, post) => {
59+
this.loading = false
60+
if (err) {
61+
this.error = err.toString()
62+
} else {
63+
this.post = post
64+
}
65+
})
66+
}
67+
}
68+
}
69+
```
70+
71+
## Запрос данных перед переходом
72+
73+
Используя этот подход, мы запрашиваем данные до завершения перехода к новому пути. Запрос данных выполняется в сторожевом хуке `beforeRouteEnter` компонента, который вызывает `next`, когда данные получены:
74+
75+
``` js
76+
export default {
77+
data () {
78+
return {
79+
post: null,
80+
error: null
81+
}
82+
},
83+
beforeRouteEnter (to, from, next) {
84+
getPost(to.params.id, (err, post) => {
85+
if (err) {
86+
// здесь стоит отобразить некоторое глобальное сообщение ошибке
87+
next(false)
88+
} else {
89+
next(vm => {
90+
vm.post = post
91+
})
92+
}
93+
})
94+
},
95+
// если путь изменяется, а компонент уже отображён,
96+
// логика будет немного иной
97+
watch: {
98+
$route () {
99+
this.post = null
100+
getPost(this.$route.params.id, (err, post) => {
101+
if (err) {
102+
this.error = err.toString()
103+
} else {
104+
this.post = post
105+
}
106+
})
107+
}
108+
}
109+
}
110+
```
111+
112+
Пользователь останется на старой странице, пока не загрузятся данные новой. По этой причине мы советуем отображать какой-нибудь индикатор загрузки. Кроме того, если загрузка данных не удастся, следует отобразить глобальное сообщение об ошибке.

docs/ru/advanced/lazy-loading.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Ленивая загрузка путей
2+
3+
При использовании модульного сборщика, результирующая JavaScript-сборка может оказаться довольно большой, что негативно сказывается на времени загрузки страницы. В некоторых случаях было бы эффективнее разделить компоненты каждого пути на отдельные минисборки, и загружать их только при переходе к соответствующему пути.
4+
5+
Совместное использование [асинхронной загрузки компонентов](http://vuejs.org/guide/components.html#Async-Components) Vue и [разделения кода](https://webpack.github.io/docs/code-splitting.html) WebPack делает реализацию ленивой загрузки компонентов в зависимости от путей тривиальной.
6+
7+
Всё, что требуется — определить компоненты путей как асинхронные:
8+
9+
``` js
10+
const Foo = resolve => {
11+
// require.ensure — это специальный синтаксис Webpack'а для определения точки разделения кода.
12+
require.ensure(['./Foo.vue'], () => {
13+
resolve(require('./Foo.vue'))
14+
})
15+
}
16+
```
17+
18+
Можно также упростить запись, используя альтернативный синтаксис разделения кода AMD:
19+
20+
``` js
21+
const Foo = resolve => require(['./Foo.vue'], resolve)
22+
```
23+
24+
В конфигурации путей ничего менять не нужно, просто используйте `Foo` как обычно:
25+
26+
``` js
27+
const router = new VueRouter({
28+
routes: [
29+
{ path: '/foo', component: Foo }
30+
]
31+
})
32+
```
33+
34+
### Объединение компонентов в единую минисборку
35+
36+
Иногда может понадобиться объединить в единую минисборку все компоненты, расположенные по определённому пути. Для достижения этой цели можно использовать [именованные минисборки Webpack](https://webpack.github.io/docs/code-splitting.html#named-chunks), указывая имя как третий параметр при вызове `require.ensure`:
37+
38+
``` js
39+
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
40+
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
41+
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
42+
```
43+
44+
Webpack сгруппирует все одноимённые асинхронные модули в единую минисборку — что среди прочего будет означать отсутствие необходимости явно указывать зависимости для `require.ensure` (поэтому мы и передаём первым параметром пустой массив).

docs/ru/advanced/meta.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Метаданные путей
2+
3+
При определении пути можно указывать метаданные в поле `meta`:
4+
5+
``` js
6+
const router = new VueRouter({
7+
routes: [
8+
{
9+
path: '/foo',
10+
component: Foo,
11+
children: [
12+
{
13+
path: 'bar',
14+
component: Bar,
15+
// метаданные
16+
meta: { requiresAuth: true }
17+
}
18+
]
19+
}
20+
]
21+
})
22+
```
23+
24+
Как получить к нему доступ?
25+
26+
Прежде всего, каждый объект пути в конфигурации `routes` называется **записью пути**. Записи путей могут быть вложенными. Поэтому, при совпадении пути, потенциально могут быть активированы несколько записей путей.
27+
28+
Например, для конфигурации выше, URL `/foo/bar` совпадёт как с родительской, так и с дочерней записями путей.
29+
30+
Все совпавшие записи путей оказываются доступны через объект `$route` (а также через объекты пути в сторожевых хуках), в виде массива `$route.matched`. Таким образом, для проверки метаданных в записях путей нам понадобиться обойти `$route.matched` в цикле.
31+
32+
В качестве примера можно привести проверку метаданных в глобальном сторожевом хуке:
33+
34+
``` js
35+
router.beforeEach((to, from, next) => {
36+
if (to.matched.some(record => record.meta.requiresAuth)) {
37+
// этот путь требует авторизации, проверяем залогинен ли
38+
// пользователь, и если нет, перенаправляем на страницу логина
39+
if (!auth.loggedIn()) {
40+
next({
41+
path: '/login',
42+
query: { redirect: to.fullPath }
43+
})
44+
} else {
45+
next()
46+
}
47+
} else {
48+
next() // всегда так или иначе нужно вызвать next()!
49+
}
50+
})
51+
```

docs/ru/advanced/navigation-guards.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Сторожевые хуки
2+
3+
Как следует из названия, сторожевые хуки `vue-router` используются для редиректов или отмены навигационных переходов. Есть несколько способов внедрить сторожевой хук: глобально, для конкретного пути, или для конкретного компонента.
4+
5+
### Глобальные хуки
6+
7+
Глобальный хук можно зарегистрировать через `router.beforeEach`:
8+
9+
``` js
10+
const router = new VueRouter({ ... })
11+
12+
router.beforeEach((to, from, next) => {
13+
// ...
14+
})
15+
```
16+
17+
Глобальные сторожевые хуки вызываются в порядке создания при каждом навигационном переходе. Допускается асинхронное разрешение хуков — в этом случае переход считается **незавершённым** до тех пор, пока не будут разрешены все хуки.
18+
19+
В каждый сторожевой хук передаётся три параметра:
20+
21+
- **`to: Route`**: целевой [объект Route](../api/route-object.md), к которому осуществляется переход.
22+
23+
- **`from: Route`**: текущий путь, с которого осуществляется переход к новому.
24+
25+
- **`next: Function`**: функция, вызов которой **разрешает** хук. В зависимости от переданных в `next` аргументов, результатом будет:
26+
27+
- **`next()`**: переход к следующему хуку в цепочке. Если хуков больше нет, переход считается **подтверждённым**.
28+
29+
- **`next(false)`**: отмена перехода. Если URL был изменён (вручную пользователем, или кнопкой "назад"), он будет сброшен на соответствующий пути `from`.
30+
31+
- **`next('/')` или `next({ path: '/' })`**: редирект на другой путь. Текущий переход будет отменён, и процесс начнётся заново для нового пути.
32+
33+
**Удостоверьтесь, что функция `next` так или иначе будет вызвана, иначе хук никогда не будет разрешён.**
34+
35+
Можно также зарегистрировать глобальные хуки, вызываемые после завершения перехода. Однако, в отличие от сторожевых хуков, в них не передаётся функция `next`, и на ход перехода они повлиять не могут:
36+
37+
``` js
38+
router.afterEach((to, from) => {
39+
// ...
40+
})
41+
```
42+
43+
### Указание хука для конкретного пути
44+
45+
Сторожевые хуки `beforeEnter` можно указать напрямую для конкретного пути в его конфигурации:
46+
47+
``` js
48+
const router = new VueRouter({
49+
routes: [
50+
{
51+
path: '/foo',
52+
component: Foo,
53+
beforeEnter: (to, from, next) => {
54+
// ...
55+
}
56+
}
57+
]
58+
})
59+
```
60+
61+
Эти хуки ничем не отличаются от глобальных.
62+
63+
### Указание хука для конкретного компонента
64+
65+
Наконец, сторожевой хук можно указать и непосредственно в компоненте, используя `beforeRouteEnter` и `beforeRouteLeave`:
66+
67+
``` js
68+
const Foo = {
69+
template: `...`,
70+
beforeRouteEnter (to, from, next) {
71+
// вызывается до подтверждения пути, соответствующего этому компоненту.
72+
// НЕ имеет доступа к контексту инстанса компонента `this`,
73+
// так как к моменту вызова истанс ещё не создан!
74+
},
75+
beforeRouteLeave (to, from, next) {
76+
// вызывается перед переходом от пути, соответствующего текущему компоненту;
77+
// имеет доступ к контексту инстанса компонента `this`.
78+
}
79+
}
80+
```
81+
82+
Хук `beforeRouteEnter` **НЕ** имеет доступа к `this`, так как к моменту его вызова навигация ещё не подтверждена, а значит и инстанс компонента ещё не создан.
83+
84+
Тем не менее, доступ к инстансу можно получить, передав коллбэк в `next`. Эта функция будет вызвана после подтверждения навигации, а экземпляр компонента будет передан в неё в качестве параметра:
85+
86+
``` js
87+
beforeRouteEnter (to, from, next) {
88+
next(vm => {
89+
// инстанс компонента доступен как `vm`
90+
})
91+
}
92+
```
93+
94+
Внутри `beforeRouteLeave` можно обращаться к `this` напрямую. Этот сторожевой хук обычно используется для предотвращения случайного ухода пользователя с пути, содержащего несохранённые отредактированные данные. Переход можно отменить, вызвав `next(false)`.

0 commit comments

Comments
 (0)