diff --git a/docs/ru/advanced/data-fetching.md b/docs/ru/advanced/data-fetching.md index 6ba1e16a5..7ee7201db 100644 --- a/docs/ru/advanced/data-fetching.md +++ b/docs/ru/advanced/data-fetching.md @@ -42,7 +42,7 @@ export default { error: null } }, - created () { + created () { // запрашиваем данные когда реактивное представление уже создано this.fetchData() }, @@ -82,31 +82,28 @@ export default { }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { - if (err) { - // здесь стоит отобразить некоторое глобальное сообщение ошибке - 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 + } } } } ``` -Пользователь останется на старой странице, пока не загрузятся данные новой. По этой причине мы советуем отображать какой-нибудь индикатор загрузки. Кроме того, если загрузка данных не удастся, следует отобразить глобальное сообщение об ошибке. +Пользователь останется на предыдущей странице, пока не загрузятся данные новой. По этой причине мы советуем отображать какой-нибудь индикатор загрузки. Кроме того, если загрузка данных не удастся, следует отобразить глобальное сообщение об ошибке. diff --git a/docs/ru/advanced/navigation-guards.md b/docs/ru/advanced/navigation-guards.md index 9a2e223e8..dbba36995 100644 --- a/docs/ru/advanced/navigation-guards.md +++ b/docs/ru/advanced/navigation-guards.md @@ -2,7 +2,7 @@ Как следует из названия, сторожевые хуки `Vue-router` используются для редиректов или отмены навигационных переходов. Есть несколько способов внедрить сторожевой хук: глобально, для конкретного пути, или для конкретного компонента. -Запомните **изменение параметров не вызывает сторожевые хуки**. Просто добавьте [watch на объект `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) для отслеживания этих изменений. +Следует помнить, что **изменение параметров маршрута не вызывает выполнения сторожевых хуков enter/leave**. Вы можете добавить [watch на объект `$route`](../essentials/dynamic-matching.md#отслеживание-изменений-параметров) для отслеживания этих изменений, или использовать хук `beforeRouteUpadte`. ### Глобальные хуки @@ -36,6 +36,14 @@ router.beforeEach((to, from, next) => { **Удостоверьтесь, что функция `next` так или иначе будет вызвана, иначе хук никогда не будет разрешён.** +### Глобальные хуки разрешения перехода + +> Добавлено в версии 2.5.0 + +В 2.5.0+ вы можете зарегистрировать глобальный хук с помощью `router.beforeResolve`. Это похоже на `router.beforeEach`, с той разницей, что разрешающий хук будет вызван непосредственно перед подтверждением навигации, **после того, как будут разрешены все хуки компонента и асинхронные компоненты для маршрута**. + +### Глобальные хуки завершения перехода + Можно также зарегистрировать глобальные хуки, вызываемые после завершения перехода. Однако, в отличие от сторожевых хуков, в них не передаётся функция `next`, и на ход перехода они повлиять не могут: ``` js @@ -108,3 +116,18 @@ beforeRouteEnter (to, from, next) { ``` Внутри `beforeRouteLeave` можно обращаться к `this` напрямую. Этот сторожевой хук обычно используется для предотвращения случайного ухода пользователя с пути, содержащего несохранённые отредактированные данные. Переход можно отменить, вызвав `next(false)`. + +### Полная цепочка обработки навигации + +1. Срабатывание навигации +2. Вызов leave-хуков в деактивируемых компонентах +3. Вызов глобальных `beforeEach` хуков +4. Вызов `beforeRouteUpdate` хука в переиспользуемых компонентах (2.2+) +5. Вызов `beforeEnter` в конфигурации маршрута +6. Разрешение асинхронных компонентов для маршрута +7. Вызов `beforeRouteEnter` в активируемых компонентах +8. Вызов глобальных `beforeResolve` хуков (2.5+) +9. Навигация подтверждена +10. Вызов глобальных `afterEach` хуков. +11. Выполняется обновление DOM. +12. Вызов коллбэков, переданных в `next` в `beforeRouteEnter` хуке с созданными экземплярами. diff --git a/docs/ru/api/component-injections.md b/docs/ru/api/component-injections.md index 555d63ae9..a5a041615 100644 --- a/docs/ru/api/component-injections.md +++ b/docs/ru/api/component-injections.md @@ -18,4 +18,4 @@ - **beforeRouteUpdate** (добавлено в версии 2.2) - **beforeRouteLeave** - См. [раздел документации о сторожевых хуках](../advanced/navigation-guards.md#incomponent-guards). + См. [раздел документации о сторожевых хуках](../advanced/navigation-guards.md#указание-хука-для-конкретного-компонента). diff --git a/docs/ru/api/router-instance.md b/docs/ru/api/router-instance.md index 09570f6fc..d84282cb1 100644 --- a/docs/ru/api/router-instance.md +++ b/docs/ru/api/router-instance.md @@ -23,6 +23,7 @@ ### Методы - **router.beforeEach(guard)** +- **router.beforeResolve(guard)** (добавлено в версии 2.5.0+) - **router.afterEach(hook)** См. [сторожевые хуки](../advanced/navigation-guards.md). diff --git a/docs/ru/essentials/dynamic-matching.md b/docs/ru/essentials/dynamic-matching.md index fcea5632d..3d7eb9a04 100644 --- a/docs/ru/essentials/dynamic-matching.md +++ b/docs/ru/essentials/dynamic-matching.md @@ -53,6 +53,18 @@ const User = { } ``` +Или можно воспользоваться хуком `beforeRouteUpdate`, добавленным в версии 2.2: + +``` js +const User = { + template: '...', + beforeRouteUpdate (to, from, next) { + // обработка изменений параметров пути... + // не забудьте вызывать next() + } +} +``` + ### Продвинутые возможности `Vue-router` использует [path-to-regexp](https://github.com/pillarjs/path-to-regexp) в качестве движка для проверки совпадения путей, что позволяет задействовать многие продвинутые возможности, включая опциональные динамические сегменты и регулярные выражения. [Документация библиотеки](https://github.com/pillarjs/path-to-regexp#parameters) содержит информацию об этих возможностях роутинга, а [этот пример](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) — о том, как использовать их совместно с `Vue-router`.