From fb06a6d7ac2b2d9141ecc13c49591e4821d8e2d3 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Tue, 29 Aug 2017 22:21:03 +0300 Subject: [PATCH 01/16] =?UTF-8?q?navigation-guards.md=20=D0=BD=D1=83=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81?= =?UTF-8?q?=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/advanced/navigation-guards.md b/docs/ru/advanced/navigation-guards.md index dbe776eb8..c4a7b72e3 100644 --- a/docs/ru/advanced/navigation-guards.md +++ b/docs/ru/advanced/navigation-guards.md @@ -77,7 +77,7 @@ const router = new VueRouter({ Наконец, сторожевой хук можно указать и непосредственно в компоненте (том, что указан в конфигурации пути), используя следующие опции: - `beforeRouteEnter` -- `beforeRouteUpdate` (добавлено в версии 2.2) +- `beforeRouteUpdate` (добавлено в версии 2.2+) - `beforeRouteLeave` ``` js From 9f69591d02c2f69892800c83f35cdde06e0ff651 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 7 Sep 2017 09:36:07 +0300 Subject: [PATCH 02/16] =?UTF-8?q?history-mode.md=20=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BA=D0=B8=20=D0=BF=D0=BE=20IIS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/history-mode.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/ru/essentials/history-mode.md b/docs/ru/essentials/history-mode.md index fcfd63616..7e97956af 100644 --- a/docs/ru/essentials/history-mode.md +++ b/docs/ru/essentials/history-mode.md @@ -70,6 +70,9 @@ http.createServer((req, res) => { #### Internet Information Services (IIS) +1. Установить [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite) +2. Создать файл `web.config` в корневом каталоге вашего сайта со следующим содержимым: + ```xml @@ -82,17 +85,10 @@ http.createServer((req, res) => { - + - - - - - - - ``` From 14a43ebe66ce0b67f2d77c5c8d342462dd429495 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 3 Oct 2017 08:42:15 +0300 Subject: [PATCH 03/16] lazy-loading HTTPS --- docs/ru/advanced/lazy-loading.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/advanced/lazy-loading.md b/docs/ru/advanced/lazy-loading.md index b762b02f9..7bb01ba87 100644 --- a/docs/ru/advanced/lazy-loading.md +++ b/docs/ru/advanced/lazy-loading.md @@ -16,7 +16,7 @@ const Foo = () => Promise.resolve({ /* определение компонент 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 автоматически вынесет в отдельный чанк: From 05103406fd7b031e8aa11b9738ff198c70d9988e Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 3 Oct 2017 08:42:52 +0300 Subject: [PATCH 04/16] dynamic-mathcing.md HTTPS --- docs/ru/essentials/dynamic-matching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/essentials/dynamic-matching.md b/docs/ru/essentials/dynamic-matching.md index 4ba304b69..9e0685163 100644 --- a/docs/ru/essentials/dynamic-matching.md +++ b/docs/ru/essentials/dynamic-matching.md @@ -25,7 +25,7 @@ const User = { } ``` -Посмотреть на пример вживую можно [здесь](http://jsfiddle.net/yyx990803/4xfa2f19/). +Посмотреть на пример вживую можно [здесь](https://jsfiddle.net/yyx990803/4xfa2f19/). Может быть несколько динамических сегментов в одном пути. Для каждого сегмента появится соответствующее свойство в `$route.params`. Например: From 9d204ecea48cfded6c072a7e06a7d56f4556a828 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 3 Oct 2017 08:43:13 +0300 Subject: [PATCH 05/16] getting-started.md HTTPS --- docs/ru/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/essentials/getting-started.md b/docs/ru/essentials/getting-started.md index 66ac1a5e8..cb640dba6 100644 --- a/docs/ru/essentials/getting-started.md +++ b/docs/ru/essentials/getting-started.md @@ -63,6 +63,6 @@ const app = new Vue({ // Всё, приложение работает! ;) ``` -Вживую этот пример доступен [здесь](http://jsfiddle.net/yyx990803/xgrjzsup/). +Вживую этот пример доступен [здесь](https://jsfiddle.net/yyx990803/xgrjzsup/). Обратите внимание, что `` автоматически получает класс `.router-link-active` при совпадении пути. Подробнее об этом можно узнать в [справочнике API](../api/router-link.md). From f7e98d8f3bc8d3c176bef5b515faa0f05046b6f0 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 3 Oct 2017 08:44:14 +0300 Subject: [PATCH 06/16] =?UTF-8?q?navigation.md=20=D0=BC=D0=B5=D0=BB=D0=BA?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/navigation.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/ru/essentials/navigation.md b/docs/ru/essentials/navigation.md index 980a8e1db..d71207374 100644 --- a/docs/ru/essentials/navigation.md +++ b/docs/ru/essentials/navigation.md @@ -45,7 +45,7 @@ router.push({ path: '/user', params: { userId }}) // -> /user В версии 2.2.0+, можно указать опциональные `onComplete` и `onAbort` коллбеки в `router.push` или `router.replace` в качестве 2-го и 3-го аргументов. Эти коллбеки будут вызываться когда навигация либо успешно завершена (после того как все асинхронные хуки будут завершены), или прервана (переходом на этот же маршрут, или на другой маршрут прежде чем текущая навигация будет завершена), соответственно. -**Примечание:** Если путь назначения совпадает с текущим маршрутом и меняются только параметры (например: переход из одного профиля в другой `/users/1` -> `/users/2`), вам потребуется использовать [beforeRouteUpdate](./dynamic-matching.html#отслеживание-изменений-параметров) чтобы реагировать на изменения (например: получение информации о пользователе). +**Примечание:** Если путь назначения совпадает с текущим маршрутом и меняются только параметры (например, переход из одного профиля в другой `/users/1` -> `/users/2`), вам потребуется использовать [`beforeRouteUpdate`](./dynamic-matching.html#отслеживание-изменений-параметров) чтобы реагировать на изменения (например, получение информации о пользователе). #### `router.replace(location, onComplete?, onAbort?)` @@ -55,7 +55,6 @@ router.push({ path: '/user', params: { userId }}) // -> /user |-----------------------------------|-----------------------| | `` | `router.replace(...)` | - #### `router.go(n)` Единственным параметром этого метода является целое число, указывающее на сколько шагов необходимо перейти по стеку истории навигации (вперёд или назад, аналогично `window.history.go(n)`. From 60314630ff9df71559b50032adbc370f7abf79d5 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 3 Oct 2017 08:44:42 +0300 Subject: [PATCH 07/16] nested-routes.md HTTPS --- docs/ru/essentials/nested-routes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/essentials/nested-routes.md b/docs/ru/essentials/nested-routes.md index bfb428e77..cb8ae241b 100644 --- a/docs/ru/essentials/nested-routes.md +++ b/docs/ru/essentials/nested-routes.md @@ -96,4 +96,4 @@ const router = new VueRouter({ }) ``` -Действующее демо этого примера можно найти [здесь](http://jsfiddle.net/yyx990803/L7hscd8h/). +Действующее демо этого примера можно найти [здесь](https://jsfiddle.net/yyx990803/L7hscd8h/). From 7c6c78c4fb0c6e05d5b8453987f1acfcc1b9d142 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 10 Oct 2017 09:08:27 +0300 Subject: [PATCH 08/16] =?UTF-8?q?navigation-guards.md=20=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/advanced/navigation-guards.md b/docs/ru/advanced/navigation-guards.md index c4a7b72e3..47dbb3696 100644 --- a/docs/ru/advanced/navigation-guards.md +++ b/docs/ru/advanced/navigation-guards.md @@ -30,7 +30,7 @@ router.beforeEach((to, from, next) => { - **`next(false)`**: отмена перехода. Если URL был изменён (вручную пользователем, или кнопкой "назад"), он будет сброшен на соответствующий пути `from`. - - **`next('/')` или `next({ path: '/' })`**: редирект на другой путь. Текущий переход будет отменён, и процесс начнётся заново для нового пути. + - **`next('/')` или `next({ path: '/' })`**: перенаправление на другой путь. Текущий переход будет отменён, и процесс начнётся заново для нового пути. Вы можете передать любой объект местоположения в `next`, который позволяет вам указывать опции такие как `replace: true`, `name: 'home'` и любой другой параметр используемый во [входном параметре `to` компонента `router-link`](../api/router-link.md) или [`router.push`](../api/router-instance.md#methods) - **`next(error)`**: (добавлено в версии 2.4.0+) если аргумент, переданный `next` является экземпляром `Error`, навигация будет прервана и ошибка будет передана в коллбек, зарегистрированный через `router.onError()`. From 313a797be97c5e2c5a4a0b1bd1f9bc29c5b5945f Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 10 Oct 2017 09:08:54 +0300 Subject: [PATCH 09/16] =?UTF-8?q?history-mode.md=20=D0=BA=D0=B0=D0=B2?= =?UTF-8?q?=D1=8B=D1=87=D0=BA=D0=B8=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=BF=D1=80=D0=BE=20Firebase?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/history-mode.md | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/docs/ru/essentials/history-mode.md b/docs/ru/essentials/history-mode.md index 7e97956af..210f16944 100644 --- a/docs/ru/essentials/history-mode.md +++ b/docs/ru/essentials/history-mode.md @@ -43,24 +43,24 @@ location / { #### Node.js ```js -const http = require("http") -const fs = require("fs") +const http = require('http') +const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { - fs.readFile("index.htm", "utf-8", (err, content) => { + fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('Невозможно открыть файл "index.htm".') } res.writeHead(200, { - "Content-Type": "text/html; charset=utf-8" + 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { - console.log("Сервер запущен на: http://localhost:%s", httpPort) + console.log('Сервер запущен на: http://localhost:%s', httpPort) }) ``` @@ -102,6 +102,24 @@ rewrite { } ``` +#### Хостинг Firebase + +Добавьте в файл `firebase.json`: + +``` +{ + "hosting": { + "public": "dist", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} +``` + ## Предостережение При таком подходе возникает одно неприятное последствие: сервер больше не будет выдавать ошибки 404, так как обслуживание всех путей отдаётся на откуп клиентскому роутингу. Частично эту проблему можно решить, указав путь по умолчанию во Vue-router: From b0ada13f9152139730f0ca4d827bd77e136851fb Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Tue, 10 Oct 2017 09:09:25 +0300 Subject: [PATCH 10/16] =?UTF-8?q?redirect-and-alias.md=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE=20=D1=83=D1=82=D0=BE?= =?UTF-8?q?=D1=87=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/redirect-and-alias.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ru/essentials/redirect-and-alias.md b/docs/ru/essentials/redirect-and-alias.md index 84d7a765e..7dc4b29b1 100644 --- a/docs/ru/essentials/redirect-and-alias.md +++ b/docs/ru/essentials/redirect-and-alias.md @@ -35,6 +35,8 @@ const router = new VueRouter({ }) ``` +Обратите внимание, что [сторожевые хуки](../advanced/navigation-guards.md) не применяются на маршруте, который служит для перенаправления, только на его цель. В приведённом ниже примере добавление хуков `beforeEnter` или `beforeLeave` на маршрут `/a` не будет иметь никакого эффекта. + Для демонстрации более сложных возможностей, обратите внимание на [этот пример](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). ### Псевдонимы From c789300855e9cef1d15ae285102ccf9d1f75cb5f Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 11:56:21 +0300 Subject: [PATCH 11/16] =?UTF-8?q?SUMMARY.md=20=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/SUMMARY.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index 9eeca8ba6..91c1cc97f 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -1,7 +1,7 @@ # Vue-router 2 - -> Примечание: Vue-router@2.x работает только с Vue 2.x. Документация для версии 0.7.x находится [здесь (en)](https://github.com/vuejs/vue-router/tree/1.0/docs/en). - + +> Примечание: для пользователей TypeScript, vue-router@>= 3.0 требуется vue@>=2.5, и наоборот. + **[История изменений](https://github.com/vuejs/vue-router/releases)** - [Введение](README.md) From adf7b8dac140aa20c89a5b6a26db970e57a3acec Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 11:56:42 +0300 Subject: [PATCH 12/16] =?UTF-8?q?options.md=20=D0=BE=D0=B1=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=BB=D1=91=D0=BD=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80?= =?UTF-8?q?=20=D1=81=D0=B8=D0=B3=D0=BD=D0=B0=D1=82=D1=83=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/api/options.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/ru/api/options.md b/docs/ru/api/options.md index 22b1e032d..d1bc5afa7 100644 --- a/docs/ru/api/options.md +++ b/docs/ru/api/options.md @@ -74,11 +74,16 @@ Сигнатура: ``` - ( + type PositionDescriptor = + { x: number, y: number } | + { selector: string } | + ?{} + + type scrollBehaviorHandler = ( to: Route, from: Route, savedPosition?: { x: number, y: number } - ) => { x: number, y: number } | { selector: string } | ?{} + ) => PositionDescriptor | Promise ``` Для подробностей см. [Скроллинг](../advanced/scroll-behavior.md). From 1334c8bea4391161e053041dda2d2750bc6a0336 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 12:01:43 +0300 Subject: [PATCH 13/16] =?UTF-8?q?getting-started.md=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/getting-started.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/ru/essentials/getting-started.md b/docs/ru/essentials/getting-started.md index cb640dba6..ff7c7a8f6 100644 --- a/docs/ru/essentials/getting-started.md +++ b/docs/ru/essentials/getting-started.md @@ -63,6 +63,29 @@ const app = new Vue({ // Всё, приложение работает! ;) ``` +Установив маршрутизатор, мы можем получить к нему доступ через `this.$router`, а также к текущему маршруту через `this.$route` внутри любого компонента: + +```js +// Home.vue +export default { + computed: { + username () { + // Мы скоро разберём что такое `params` + return this.$route.params.username + } + }, + methods: { + goBack () { + window.history.length > 1 + ? this.$router.go(-1) + : this.$router.push('/') + } + } +} +``` + +В документации мы будем часть использовать экземпляр `router` (маршрутизатора). Имейте ввиду, что `this.$router` в точности тоже самое, что и `router`. Причина, по которой мы используем `this.$router` заключается в том, что мы не хотим импортировать маршрутизатор в каждом компонент, в котором потребуется управлять маршрутизацией. + Вживую этот пример доступен [здесь](https://jsfiddle.net/yyx990803/xgrjzsup/). Обратите внимание, что `` автоматически получает класс `.router-link-active` при совпадении пути. Подробнее об этом можно узнать в [справочнике API](../api/router-link.md). From 6b7cdfa00eb0ecbae76d089e56ec9923751c60a0 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 12:04:55 +0300 Subject: [PATCH 14/16] =?UTF-8?q?navigation-guards.md=20=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/advanced/navigation-guards.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/ru/advanced/navigation-guards.md b/docs/ru/advanced/navigation-guards.md index 47dbb3696..fc7d96e0e 100644 --- a/docs/ru/advanced/navigation-guards.md +++ b/docs/ru/advanced/navigation-guards.md @@ -115,7 +115,28 @@ beforeRouteEnter (to, from, next) { } ``` -Внутри `beforeRouteLeave` можно обращаться к `this` напрямую. Этот сторожевой хук обычно используется для предотвращения случайного ухода пользователя с пути, содержащего несохранённые отредактированные данные. Переход можно отменить, вызвав `next(false)`. +Обратите внимание, что `beforeRouteEnter` — единственный хук, который поддерживает передачу коллбэка в `next`. Для `beforeRouteUpdate` и `beforeRouteLeave`, `this` уже доступен, поэтому передача коллбэка не требуется и поэтому *не поддерживается*: + +```js +beforeRouteUpdate (to, from, next) { + // просто используйте `this` + this.name = to.params.name + next() +} +``` + +**Сторожевой хук ухода со страницы** обычно используется для предотвращения случайного ухода пользователя со страницы с несохранёнными изменениями. Навигацию можно отменить вызовом `next(false)`. + +```js +beforeRouteLeave (to, from , next) { + const answer = window.confirm('Вы действительно хотите уйти? У вас есть несохранённые изменения!') + if (answer) { + next() + } else { + next(false) + } +} +``` ### Полная цепочка обработки навигации From c8a6e292f335541a1c149d8c3b6607beecad06e0 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 12:10:17 +0300 Subject: [PATCH 15/16] =?UTF-8?q?scroll-behavior.md=20=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/advanced/scroll-behavior.md | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/ru/advanced/scroll-behavior.md b/docs/ru/advanced/scroll-behavior.md index 0f64c5a22..c15e381ed 100644 --- a/docs/ru/advanced/scroll-behavior.md +++ b/docs/ru/advanced/scroll-behavior.md @@ -2,7 +2,7 @@ При переходе между страницами в рамках клиентского роутинга, можно сохранять позицию скроллинга для каждой записи в истории (что обычно делают браузеры при работе с традиционными приложениями), или же проматывать страницу вверх. `Vue-router` позволяет использовать оба варианта, и даже более того — позволяет полностью настроить поведение скроллинга при навигации. -**Замечание: эта возможность работает только в режиме HTML5 history mode.** +**Замечание: эта возможность работает если браузер поддерживает `history.pushState`.** При создании экземпляра роутера, вы можете указать функцию `scrollBehavior`: @@ -60,3 +60,21 @@ scrollBehavior (to, from, savedPosition) { ``` Можно также использовать [метаданные путей](meta.md) для более сложного управления скроллингом. Полная реализация подхода содержится в [этом примере](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). + +### Асинхронный скроллинг + +> Добавлено в версии 2.8.0 + +Вы также можете вернуть Promise, который разрешится дескриптором с желаемой позицией: + +``` js +scrollBehavior (to, from, savedPosition) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve({ x: 0, y: 0 }) + }, 500) + }) +} +``` + +Это возможно связать с событиями из сменяющегося компонента-страниц, чтобы сделать поведение прокрутки более сочетаемым с вашими анимациями перехода между страницами, но из-за множества возможных вариантов и комплексности примеров, мы просто предоставляем этот просто пример чтобы показать где можно разместить собственную реализацию. \ No newline at end of file From 0bd7c804c7ef2e5f16786ba94c0c1e1bc6f5da91 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 12 Oct 2017 14:07:13 +0300 Subject: [PATCH 16/16] =?UTF-8?q?getting-started.md=20=D0=BE=D0=BF=D0=B5?= =?UTF-8?q?=D1=87=D0=B0=D1=82=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/essentials/getting-started.md b/docs/ru/essentials/getting-started.md index ff7c7a8f6..446e2c418 100644 --- a/docs/ru/essentials/getting-started.md +++ b/docs/ru/essentials/getting-started.md @@ -84,7 +84,7 @@ export default { } ``` -В документации мы будем часть использовать экземпляр `router` (маршрутизатора). Имейте ввиду, что `this.$router` в точности тоже самое, что и `router`. Причина, по которой мы используем `this.$router` заключается в том, что мы не хотим импортировать маршрутизатор в каждом компонент, в котором потребуется управлять маршрутизацией. +В документации мы будем часто использовать экземпляр `router` (маршрутизатора). Имейте ввиду, что `this.$router` в точности тоже самое, что и `router`. Причина, по которой мы используем `this.$router` заключается в том, что мы не хотим импортировать маршрутизатор в каждом компоненте, в котором потребуется управлять маршрутизацией. Вживую этот пример доступен [здесь](https://jsfiddle.net/yyx990803/xgrjzsup/).