From fa9c9f01d1bb2dd7dc402b7ca8dd3e77dae74d42 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Tue, 14 Aug 2018 11:12:16 +0300 Subject: [PATCH 01/22] docs: [RU] Translation update --- docs/ru/api/README.md | 94 ++++++++++---------- docs/ru/guide/README.md | 2 +- docs/ru/guide/advanced/lazy-loading.md | 12 +-- docs/ru/guide/advanced/navigation-guards.md | 6 +- docs/ru/guide/essentials/dynamic-matching.md | 2 +- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md index ef1f09a13..b0738b7e7 100644 --- a/docs/ru/api/README.md +++ b/docs/ru/api/README.md @@ -8,19 +8,19 @@ sidebar: auto ## `` -`` — это компонент предназначенный для навигации пользователя в приложении с клиентской маршрутизацией. Путь назначения указывается с помощью входного параметра `to`. По умолчанию рендерится в тег `` с корректным значением `href`, но может быть сконфигурирован входным параметром `tag`. Кроме того, ссылка автоматически получает активный класс CSS при переходе на путь назначения. +`` — это компонент предназначенный для навигации пользователя в приложении с клиентской маршрутизацией. Путь назначения указывается входным параметром `to`. По умолчанию компонент рендерится в тег `` с корректным значением `href`, но это можно изменить входным параметром `tag`. Кроме того, ссылка автоматически получает активный класс CSS при переходе на путь назначения. -`` предпочтительнее жёстко закодированного `` по следующим причинам: +`` предпочтительнее `` по следующим причинам: -- Он работает одинаково вне зависимости от режима навигации (HTML5 history или хэши), поэтому если вы решите переключить режим, или маршрутизатор для совместимости переключится обратно в режим хэша в IE9, ничего не потребуется изменять. +- Он работает одинаково вне зависимости от режима работы (HTML5 history или хэш), поэтому если вы решите переключить режим, или маршрутизатор для совместимости переключится обратно в режим хэша в IE9, ничего не потребуется изменять. - В режиме HTML5 history, `router-link` будет перехватывать событие click, чтобы браузер не пытался перезагрузить страницу. -- При использовании опции `base` в режиме HTML5 history mode, вам не потребуется добавлять её в URL входного параметра `to`. +- При использовании опции `base` в режиме работы HTML5 history, вам не потребуется добавлять её в URL входного параметра `to`. ### Применение активного класса к внешнему элементу -Иногда может потребоваться, чтобы активный класс применялся к внешнему элементу, а не к тегу ``, в этом случае вы можете отобразить внешний элемент с помощью `` и обернуть содержимое тегом `` внутри: +Иногда может потребоваться применять активный класс к внешнему элементу, а не к тегу ``, в этом случае можно отобразить внешний элемент с помощью `` и обернуть содержимое тегом `` внутри: ``` html @@ -66,7 +66,7 @@ sidebar: auto - тип: `boolean` - по умолчанию: `false` - Установка входного параметра `replace` вызовет `router.replace()` вместо `router.push()` при нажатии, поэтому навигация не оставит записи в истории переходов. + Указание входного параметра `replace` вызовет `router.replace()` вместо `router.push()` при нажатии на ссылку, поэтому навигация не оставит записи в истории переходов. ``` html @@ -77,7 +77,7 @@ sidebar: auto - тип: `boolean` - по умолчанию: `false` - Установка входного параметра `append` будет всегда добавлять относительный путь к текущему. Например, если мы переходим от `/a` к относительной ссылке `b`, то без `append` мы получим адрес `/b`, а вместе с `append` мы получим `/a/b`. + Указание входного параметра `append` будет добавлять относительный путь к текущему. Например, если мы переходим от `/a` к относительной ссылке `b`, то без `append` будет адрес `/b`, а вместе с `append` получится `/a/b`. ``` html @@ -88,11 +88,11 @@ sidebar: auto - тип: `string` - по умолчанию: `"a"` - Иногда мы хотим чтобы `` отображался другим тегом, например `
  • `. В таком случае мы можем использовать входной параметр `tag`, чтобы указать нужный тег, и он всё равно будет прослушивать события click для навигации. + Иногда необходимо чтобы `` отображался другим тегом, например `
  • `. В таком случае мы можем использовать входной параметр `tag`, чтобы указать нужный тег, и он всё равно будет прослушивать события click для навигации. ``` html foo - +
  • foo
    • ``` @@ -101,23 +101,23 @@ sidebar: auto - тип: `string` - по умолчанию: `"router-link-active"` - Определение активного класса CSS, который будет применяться когда ссылка активна. Обратите внимание, что значение по умолчанию также можно настроить глобально через опцию `linkActiveClass` конструктора маршрутизатора. + Указание активного CSS класса, который применяется когда ссылка активна. Обратите внимание, что значение по умолчанию можно задать глобально в опции `linkActiveClass` конструктора маршрутизатора. ### exact - тип: `boolean` - по умолчанию: `false` - Стандартное поведение для определения когда выставлять активный класс основывается на **совпадениях по включению**. Например, `` будет получать этот класс, если текущий путь начинается с `/a/` или `/a`. + Стандартное поведение определения когда выставлять активный класс основывается на **совпадениях по включению**. Например, `` будет получать класс активности, когда текущий путь начинается с `/a/` или `/a`. - Одним из следствий этого то, что `` будет активным для каждого маршрута! Чтобы заставить ссылку использовать "режим точного соответствия" нужно использовать входной параметр `exact`: + Обратите внимание, поэтому `` будет активным для каждого маршрута! Для «режима точного соответствия» укажите в ссылке входной параметр `exact`: ``` html ``` - Ознакомьтесь с другими примерами, объясняющими активный класс ссылок [вживую](https://jsfiddle.net/8xrk1n9f/). + Ознакомьтесь с другими примерами активных классов ссылок [вживую](https://jsfiddle.net/8xrk1n9f/). ### event @@ -131,15 +131,15 @@ sidebar: auto - тип: `string` - по умолчанию: `"router-link-exact-active"` - Определение активного класса CSS, который будет применяться когда ссылка активна с точным соответствием пути. Обратите внимание, что значение по умолчанию также можно настроить глобально через опцию `linkExactActiveClass` конструктора маршрутизатора. + Указание активного CSS класса, который применяется когда ссылка активна с точным соответствием пути. Обратите внимание, что значение по умолчанию можно задать глобально в опции `linkExactActiveClass` конструктора маршрутизатора. ## `` -Компонент `` является функциональным компонентом, который отображает соответствующий данному маршруту компонент. Компоненты отображаемые в `` также могут содержать в шаблоне собственный ``, который будет использован для отображения компонентов вложенных маршрутов. +Функциональный компонент `` отображает компонент соответствующий данному маршруту. Компоненты внутри `` также могут содержать в шаблоне собственный `` (он будет использован для отображения компонентов вложенных маршрутов). -Все остальные входные параметры будут переданы в отображаемый компонент, однако чаще всего данные маршрута можно получить из `$route.params` текущего маршрута. +Все остальные входные параметры передаются в отображаемый компонент, однако данные маршрута удобнее получать из `$route.params` текущего маршрута. -Поскольку это всего лишь компонент, он работает вместе с `` и ``. При использовании обоих вместе, обязательно используйте `` внутри: +Поскольку это всего лишь компонент, он работает вместе с `` и ``. При одновременном использовании обоих обязательно располагайте `` внутри: ``` html @@ -156,7 +156,7 @@ sidebar: auto - тип: `string` - по умолчанию: `"default"` - При наличии имени у ``, оно будет отображать компонент с соответствующим именем в опции `components` сопоставленного маршрута. Обратитесь к разделу [именованных представлений](../guide/essentials/named-views.md) для примера. + Наличие имени у `` определяет отображение компонента с соответствующим именем из опции `components` сопоставленного маршрута. Подробности и примеры использования этой возможности в разделе [именованных представлений](../guide/essentials/named-views.md). ## Опции конструктора Router @@ -195,11 +195,11 @@ sidebar: auto Определяет режим работы маршрутизатора. - - `hash`: используется хэш URL для маршрутизации. Работает во всех совместимых с Vue браузерами, включая те, что не поддерживают HTML5 History API. + - `hash`: используется хэш URL для маршрутизации. Работает во всех совместимых с Vue браузерами, даже тех, что не поддерживают HTML5 History API. - `history`: требует поддержки HTML5 History API и конфигурации сервера. Подробнее в разделе [Режим HTML5 History](../guide/essentials/history-mode.md). - - `abstract`: работает во всех JavaScript-окружениях, например серверный рендеринг с помощью Node.js. **Маршрутизатор автоматически переключается в этот режим, если не обнаружит API браузера.** + - `abstract`: работает во всех JavaScript-окружениях, например при серверном рендеринге с помощью Node.js. **Маршрутизатор автоматически переключается в этот режим, если не обнаружит API браузера.** ### base @@ -215,7 +215,7 @@ sidebar: auto - по умолчанию: `"router-link-active"` - Глобальная настройка активного класса по умолчанию для ``. Подробнее смотри в [router-link](#router-link). + Глобальная настройка активного класса по умолчанию для ``. Подробнее в опции [router-link](#router-link). ### linkExactActiveClass @@ -223,7 +223,7 @@ sidebar: auto - по умолчанию: `"router-link-exact-active"` - Глобальная настройка активного класса по умолчанию при точном совпадении маршрута для ``. Подробнее смотри в [router-link](#router-link). + Глобальная настройка активного класса по умолчанию при точном совпадении маршрута для ``. Подробнее в опции [router-link](#router-link). ### scrollBehavior @@ -244,13 +244,13 @@ sidebar: auto ) => PositionDescriptor | Promise ``` - Подробнее в разделе [Скроллинг](../guide/advanced/scroll-behavior.md). + Подробнее в разделе настройки [поведения прокрутки страницы](../guide/advanced/scroll-behavior.md). ### parseQuery / stringifyQuery - тип: `Function` - Предоставление пользовательский функций для парсинга строки запроса / приведения к строке запроса (функции stringify). Переопределяют реализации по умолчанию. + Указание пользовательских функций для парсинга строки запроса / приведения к строке запроса (stringify). Переопределяют реализации по умолчанию. ### fallback @@ -260,7 +260,7 @@ sidebar: auto Определяет, должен ли маршрутизатор возвращаться в режим `hash`, когда браузер не поддерживает `history.pushState`. - Установка этого параметра в `false` будет вызывать для каждой навигации через `` полное обновление страницы в IE9. Это может быть полезным, когда приложение рендерится на стороне сервера и должно работать в IE9, потому что режим `hash` не работает с серверным рендерингом (SSR). + Установка этой опции в `false` будет приводить к полному обновлению страницы в IE9 для каждой навигации через ``. Это полезно, когда приложение рендерится на стороне сервера (SSR) и должно работать в IE9, потому что режим `hash` не работает с серверным рендерингом. ## Свойства экземпляра Router @@ -274,13 +274,13 @@ sidebar: auto - тип: `string` - [Режим](./#mode) работы, используемый маршрутизатором. + [Режим работы](./#mode), используемый маршрутизатором. ### router.currentRoute - тип: `Route` - Текущий маршрут в виде [объекта Route](#the-route-object). + Текущий маршрут в виде [объекта Route](#объект-route). ## Методы экземпляра Router @@ -302,9 +302,9 @@ router.beforeResolve((to, from, next) => { router.afterEach((to, from) => {}) ``` -Добавляют глобальные навигационные хуки навигации. Подробнее в разделе [Навигационные хуки](../guide/advanced/navigation-guards.md). +Добавляют глобальные навигационные хуки. Подробнее в разделе [Навигационные хуки](../guide/advanced/navigation-guards.md). -Все три метода возвращают функцию, которая удаляет зарегистрированный хук. +Все три метода возвращают функцию для удаления зарегистрированного хука. ### router.push ### router.replace @@ -322,7 +322,7 @@ router.back() router.forward() ``` -Программная навигация к новому URL. Подробнее в разделе [Программная навигация](../guide/essentials/navigation.md). +Программная навигация на новый URL. Подробнее в разделе [программная навигация](../guide/essentials/navigation.md). ### router.getMatchedComponents @@ -346,10 +346,10 @@ const resolved: { } = router.resolve(location, current?, append?) ``` -Обратное разрешение URL. Полученное местоположение в формате, аналогичном используемому в ``. +Обратное разрешение URL, чтобы получить местоположение в формате, аналогичном используемому в ``. -- `current` текущий маршрут по умолчанию (в большинстве случаев вам не потребуется это менять) -- `append` позволяет вам добавить путь к маршруту `current` (как например с помощью [`router-link`](#router-link-props)) +- `current` текущий маршрут по умолчанию (в большинстве случаев не требуется это менять) +- `append` позволяет вам добавить путь к маршруту `current` (как и в [`router-link`](#router-link-props)) ### router.addRoutes @@ -369,11 +369,11 @@ router.addRoutes(routes: Array) router.onReady(callback, [errorCallback]) ``` -Этот метод добавляет в очередь коллбэк, который будет вызван когда маршрутизатор завершит начальную навигацию, что означает что будут завершены все асинхронные хуки и будут готовы асинхронные компоненты, связанные с начальным маршрутом. +Регистрирует коллбэк, который будет вызван когда маршрутизатор завершит начальную навигацию, когда будут завершены все асинхронные хуки и готовы асинхронные компоненты, связанные с начальным маршрутом. -Это пригодится при рендеринге на стороне сервера, чтобы обеспечить консистентный результат как на сервере, так и на клиенте. +Пригодится при рендеринге на стороне сервера, чтобы обеспечить консистентный результат как на сервере, так и на клиенте. -Второй аргумент `errorCallback` поддерживается только в версиях 2.4+. Он вызывается, когда исходное разрешение маршрута заканчивается ошибкой (например, не удалось разрешить асинхронный компонент). +Второй аргумент `errorCallback` поддерживается только в версиях 2.4+. Он вызывается когда начальное разрешение маршрута заканчивается ошибкой (например, не удалось разрешить асинхронный компонент). ### router.onError @@ -383,7 +383,7 @@ router.onReady(callback, [errorCallback]) router.onError(callback) ``` -Регистрирует коллбэк, который будет вызван при обнаружении ошибок во время навигации по маршруту. Обратите внимание, что для вызова коллбэка это должен быть один из следующих сценариев: +Регистрирует коллбэк, который будет вызван при обнаружении ошибок во время навигации по маршруту. Обратите внимание, что он вызывается в одном из следующих сценариев: - Ошибка произошла синхронно внутри функции маршрута; @@ -393,9 +393,9 @@ router.onError(callback) ## Объект Route -**Объект маршрута (Route)** представляет собой состояние текущего активного маршрута. Он содержит информацию о текущем URL и **записи маршрутов**, совпавшие с ним. +**Объект Route** представляет собой состояние текущего активного маршрута. Он содержит информацию о текущем URL и **записи маршрутов**, сопоставленные с ним. -Объект маршрута иммутабелен. Каждая успешная навигация будет создавать новый объект маршрута. +Объект маршрута иммутабелен. Каждая успешная навигация создаёт новый объект маршрута. Объект маршрута встречается в нескольких местах: @@ -429,7 +429,7 @@ router.onError(callback) - тип: `string` - Строка, идентичная пути текущего маршрута, всегда в абсолютном формате, например `"/foo/bar"`. + Строка пути текущего маршрута, всегда в абсолютном формате, например `"/foo/bar"`. - **$route.params** @@ -441,13 +441,13 @@ router.onError(callback) - тип: `Object` - Объект, который содержит пары ключ/значение для строки запроса (query string). Например, для пути `/foo?user=1`, мы получим `$route.query.user == 1`. Если строки запроса нет, то значением будет пустой объект. + Объект, который содержит пары ключ/значение строки запроса (query string). Например, для пути `/foo?user=1` получим `$route.query.user == 1`. Если строки запроса нет, то значением будет пустой объект. - **$route.hash** - тип: `string` - Хэш текущего маршрута (вместе с символом `#`), если присутствует. Если хэша нет, то значением будет пустая строка. + Хэш текущего маршрута (вместе с символом `#`) при его наличии. Если хэша нет, то значением будет пустая строка. - **$route.fullPath** @@ -459,7 +459,7 @@ router.onError(callback) - тип: `Array` - Массив, содержащий **записи маршрутов** для всех вложенных сегментов текущего маршрута. Записи маршрутов — это копии объектов из опции `routes` конфигурации (и вложенных массивов `children`): + Массив с **записями маршрутов** для всех вложенных сегментов текущего маршрута. Записи маршрутов — это копии объектов из опции `routes` (и вложенных массивов `children`): ``` js const router = new VueRouter({ @@ -475,15 +475,15 @@ router.onError(callback) }) ``` -Для URL, равного `/foo/bar`, `$route.matched` будет массивом, содержащим копии объектов (клоны), в порядке сортировки от родителя к потомку. +Для URL `/foo/bar`, значение `$route.matched` будет массивом, содержащим копии объектов (клоны), в порядке сортировки от родителя к потомку. - **$route.name** - Имя текущего маршрута, если такое указано. (Подробнее в разделе [Именованные маршруты](../guide/essentials/named-routes.md)) + Имя текущего маршрута, если было указано. (Подробнее в разделе [именованные маршруты](../guide/essentials/named-routes.md)) - **$route.redirectedFrom** - Имя маршрута с которого было перенаправление, если такое указано. (Подробнее в разделе [Перенаправления и псевдонимы](../guide/essentials/redirect-and-alias.md)) + Имя маршрута с которого произошло перенаправление, если было указано. (Подробнее в разделе [перенаправления и псевдонимы](../guide/essentials/redirect-and-alias.md)) ## Интеграция в компоненты @@ -497,7 +497,7 @@ router.onError(callback) - **this.$route** - Текущий активный [маршрут (Route)](#the-route-object). Это свойство только для чтения и все его свойства иммутабельны, но можно отслеживать их изменение. + Текущий активный [маршрут](#объект-route). Это свойство только для чтения и все его свойства иммутабельны, но можно отслеживать их изменения. ### Добавляемые опции в компонент diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md index 59deef3e2..5e2d20381 100644 --- a/docs/ru/guide/README.md +++ b/docs/ru/guide/README.md @@ -33,7 +33,7 @@ ## JavaScript ``` js -// 0. Если используем модульную систему (например через vue-cli), +// 0. Если используем модульную систему (например через vue-cli), // импортируем Vue и VueRouter и затем вызываем `Vue.use(VueRouter)`. // 1. Определяем компоненты для маршрутов. diff --git a/docs/ru/guide/advanced/lazy-loading.md b/docs/ru/guide/advanced/lazy-loading.md index d06c960d1..3517c12ea 100644 --- a/docs/ru/guide/advanced/lazy-loading.md +++ b/docs/ru/guide/advanced/lazy-loading.md @@ -1,6 +1,6 @@ # Ленивая загрузка маршрутов -При использовании модульной системы, итоговая JavaScript-сборка может оказаться довольно большой, что негативно отразится на времени загрузки страницы. В некоторых случаях было бы эффективнее разделить компоненты каждого маршрута на отдельные мини-сборки, и подгружать их только при переходе к соответствующему маршруту. +При использовании модульной системы, итоговая JavaScript-сборка может оказаться довольно большой, что негативно отразится на времени загрузки страницы. В некоторых случаях было бы эффективнее разделить компоненты каждого маршрута на отдельные фрагменты, и подгружать их только при переходе к соответствующему маршруту. Совместное использование [асинхронной загрузки компонентов](https://ru.vuejs.org/v2/guide/components-dynamic-async.html#Асинхронные-компоненты) Vue и [возможностям по разделению кода](https://webpack.js.org/guides/code-splitting-async/) Webpack делает реализацию ленивой загрузки компонентов в зависимости от маршрутов тривиальной. @@ -17,10 +17,10 @@ import('./Foo.vue') // возвращает Promise ``` ::: tip Примечание -если вы используете Babel, то необходимо добавить плагин [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/), чтобы Babel смог корректно обработать синтаксис. +Если вы используете Babel, то необходимо добавить плагин [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/), чтобы Babel смог корректно обработать синтаксис. ::: -Эти два пункта — всё необходимое, чтобы определить асинхронный компонент, который Webpack автоматически выделит в отдельную мини-сборку: +Эти два пункта — всё необходимое, чтобы определить асинхронный компонент, который Webpack автоматически выделит в отдельный фрагмент: ``` js const Foo = () => import('./Foo.vue') @@ -36,9 +36,9 @@ const router = new VueRouter({ }) ``` -## Группировка компонентов в одну мини-сборку +## Группировка компонентов в одном фрагменте -Иногда может понадобиться объединить в одну мини-сборку все компоненты, расположенные по определённому маршруту. Для этого можно указать [имя мини-сборки Webpack](https://webpack.js.org/guides/code-splitting-async/#chunk-names), используя специальный синтаксис комментариев (в версиях Webpack > 2.4): +Иногда может понадобиться объединить в одном фрагменте все компоненты, расположенные по определённому маршруту. Для этого можно указывать [имена фрагментов Webpack](https://webpack.js.org/guides/code-splitting-async/#chunk-names), используя специальный синтаксис комментариев (в версиях Webpack > 2.4): ``` js const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') @@ -46,4 +46,4 @@ const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') ``` -Webpack сгруппирует все одноимённые асинхронные модули в одной мини-сборке. +Webpack сгруппирует все одноимённые асинхронные модули в одном фрагменте. diff --git a/docs/ru/guide/advanced/navigation-guards.md b/docs/ru/guide/advanced/navigation-guards.md index 6e5d33fc5..e6635a53f 100644 --- a/docs/ru/guide/advanced/navigation-guards.md +++ b/docs/ru/guide/advanced/navigation-guards.md @@ -2,7 +2,7 @@ Как следует из названия, навигационные хуки `vue-router` используются для перенаправлений или отмены навигационных переходов. Есть несколько способов внедрить навигационный хук: глобально, для конкретного маршрута, или для конкретного компонента. -Следует помнить, что **изменение параметров маршрута не вызывает выполнения навигационных хуков enter/leave**. Вы можете добавить [watch на объект `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) для отслеживания этих изменений, или использовать хук `beforeRouteUpdate`. +Следует помнить, что **изменение параметров маршрута не вызывает выполнения навигационных хуков enter/leave**. Вы можете добавить [watch на объект `$route`](../essentials/dynamic-matching.md#отсnеживание-изменений-параметров) для отслеживания этих изменений, или использовать хук `beforeRouteUpdate`. ## Глобальные хуки @@ -16,11 +16,11 @@ router.beforeEach((to, from, next) => { }) ``` -Глобальные навигационные хуки вызываются в порядке их создания при каждом навигационном переходе. Допускается асинхронное разрешение хуков — в этом случае переход считается **незавершённым** до тех пор, пока не будут разрешены все хуки. +Глобальные навигационные хуки вызываются в порядке их создания при каждом навигационном переходе. Допускается асинхронное разрешение хуков — в этом случае переход считается **незавершённым** до тех пор, пока не будут разрешены все хуки. В каждый навигационный хук передаётся три параметра: -- **`to: Route`**: целевой [объект Route](../../api/#the-route-object), к которому осуществляется переход. +- **`to: Route`**: целевой [объект Route](../../api/#объект-route), к которому осуществляется переход. - **`from: Route`**: текущий маршрут, с которого осуществляется переход к новому. diff --git a/docs/ru/guide/essentials/dynamic-matching.md b/docs/ru/guide/essentials/dynamic-matching.md index 0a3e9cf20..1f9a80cd6 100644 --- a/docs/ru/guide/essentials/dynamic-matching.md +++ b/docs/ru/guide/essentials/dynamic-matching.md @@ -34,7 +34,7 @@ const User = { | /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/#the-route-object). +Кроме `$route.params`, объект `$route` предоставляют и другую полезную информацию, например `$route.query` (если URL содержит строку запроса), `$route.hash`, и т.д. Подробнее в [справочнике API](../../api/#объект-route). ## Отслеживание изменений параметров From 2a85f361dd5ae7839121886443bff08aa2559132 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Mon, 12 Nov 2018 20:30:20 +0300 Subject: [PATCH 02/22] =?UTF-8?q?README.md=20=D0=BE=D0=B1=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=BB=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/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ru/README.md b/docs/ru/README.md index 07f61dfe5..ca953119d 100644 --- a/docs/ru/README.md +++ b/docs/ru/README.md @@ -6,14 +6,14 @@ Для пользователей TypeScript, `vue-router@3.0+` требуется `vue@2.5+`, и наоборот. ::: -Vue Router — официальная библиотека маршрутизации для [Vue.js](https://ru.vuejs.org/). Она глубоко интегрируется с ядром Vue.js, что позволяет создавать SPA-приложения с лёгкостью. Включает следующие возможности: +Vue Router — официальная библиотека маршрутизации для [Vue.js](https://ru.vuejs.org/). Она глубоко интегрируется с Vue.js и позволяет легко создавать SPA-приложения. Включает следующие возможности: - Вложенные маршруты/представления - Модульная конфигурация маршрутизатора - Доступ к параметрам маршрута, query, wildcards - Анимация переходов представлений на основе Vue.js - Удобный контроль навигации -- Автоматическое проставление активного класса CSS для ссылок +- Автоматическое проставление активного CSS класса для ссылок - Режимы работы HTML5 history или хэш, с авто-переключением в IE9 - Настраиваемое поведение прокрутки страницы From ee6c9cb587fa3d32b407b158bd20024df96fdea3 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Fri, 7 Dec 2018 12:20:29 +0300 Subject: [PATCH 03/22] navigation.md fix --- docs/ru/guide/essentials/navigation.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/ru/guide/essentials/navigation.md b/docs/ru/guide/essentials/navigation.md index f116b3213..258c4c806 100644 --- a/docs/ru/guide/essentials/navigation.md +++ b/docs/ru/guide/essentials/navigation.md @@ -14,13 +14,13 @@ sidebarDepth: 0 При клике на `` этот метод вызывается автоматически. Клик по `` эквивалентен программному вызову `router.push(...)`. -| Декларативная запись | Программная запись | -|-------------|--------------| +| Декларативная запись | Программная запись | +|---------------------------|--------------------| | `` | `router.push(...)` | В качестве аргумента можно передать строку или объект, описывающий маршрут. Например: -``` js +```js // строка router.push('home') @@ -28,20 +28,20 @@ router.push('home') router.push({ path: 'home' }) // именованный маршрут -router.push({ name: 'user', params: { userId: 123 }}) +router.push({ name: 'user', params: { userId: '123' } }) // со строкой запроса, получится /register?plan=private -router.push({ path: 'register', query: { plan: 'private' }}) +router.push({ path: 'register', query: { plan: 'private' } }) ``` **Примечание**: `params` игнорируются, если указан `path`, что не является случаем с `query` приведённым в примере выше. Вместо этого, вам нужно указать `name` маршрута или вручную указать весь `path` с необходимыми параметрами: ```js -const userId = 123 -router.push({ name: 'user', params: { userId }}) // -> /user/123 +const userId = '123' +router.push({ name: 'user', params: { userId } }) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // Это НЕ БУДЕТ работать -router.push({ path: '/user', params: { userId }}) // -> /user +router.push({ path: '/user', params: { userId } }) // -> /user ``` Такие же правила применяются и к входному параметру `to` компонента `router-link`. @@ -54,8 +54,8 @@ router.push({ path: '/user', params: { userId }}) // -> /user Действует как `router.push`, с той лишь разницей, что переход осуществляется без добавления новой записи в историю навигации, а заменяет текущую запись в нём. -| Декларативная запись | Программная запись | -|-------------|--------------| +| Декларативная запись | Программная запись | +|-----------------------------------|-----------------------| | `` | `router.replace(...)` | ## `router.go(n)` @@ -64,7 +64,7 @@ router.push({ path: '/user', params: { userId }}) // -> /user Примеры: -``` js +```js // перейти на одну запись вперёд, эквивалентно history.forward() router.go(1) From 0b8404252091d465ed91f5bd508f6033307287bd Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Fri, 7 Dec 2018 12:22:52 +0300 Subject: [PATCH 04/22] consistent code blocks --- docs/ru/api/README.md | 36 +++++++++---------- docs/ru/guide/README.md | 4 +-- docs/ru/guide/advanced/data-fetching.md | 6 ++-- docs/ru/guide/advanced/lazy-loading.md | 10 +++--- docs/ru/guide/advanced/meta.md | 4 +-- docs/ru/guide/advanced/navigation-guards.md | 10 +++--- docs/ru/guide/advanced/scroll-behavior.md | 10 +++--- docs/ru/guide/advanced/transitions.md | 8 ++--- docs/ru/guide/essentials/dynamic-matching.md | 8 ++--- docs/ru/guide/essentials/history-mode.md | 4 +-- docs/ru/guide/essentials/named-routes.md | 6 ++-- docs/ru/guide/essentials/named-views.md | 4 +-- docs/ru/guide/essentials/nested-routes.md | 10 +++--- docs/ru/guide/essentials/passing-props.md | 8 ++--- .../ru/guide/essentials/redirect-and-alias.md | 8 ++--- docs/ru/installation.md | 8 ++--- 16 files changed, 72 insertions(+), 72 deletions(-) diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md index ada5b6381..ac65b6cd5 100644 --- a/docs/ru/api/README.md +++ b/docs/ru/api/README.md @@ -22,7 +22,7 @@ sidebar: auto Иногда может потребоваться применять активный класс к внешнему элементу, а не к тегу `    `, в этом случае можно отобразить внешний элемент с помощью `` и обернуть содержимое тегом `` внутри: -``` html +```html /foo     @@ -39,7 +39,7 @@ sidebar: auto Определяет итоговый маршрут ссылки. При нажатии, значение входного параметра `to` будет передано в `router.push()` — поэтому это значение может быть как строкой, так и объектом описывающим маршрут. - ``` html + ```html Home @@ -68,7 +68,7 @@ sidebar: auto Указание входного параметра `replace` вызовет `router.replace()` вместо `router.push()` при нажатии на ссылку, поэтому навигация не оставит записи в истории переходов. - ``` html + ```html ``` @@ -79,7 +79,7 @@ sidebar: auto Указание входного параметра `append` будет добавлять относительный путь к текущему. Например, если мы переходим от `/a` к относительной ссылке `b`, то без `append` будет адрес `/b`, а вместе с `append` получится `/a/b`. - ``` html + ```html ``` @@ -90,7 +90,7 @@ sidebar: auto Иногда необходимо чтобы `` отображался другим тегом, например `
  • `. В таком случае мы можем использовать входной параметр `tag`, чтобы указать нужный тег, и он всё равно будет прослушивать события click для навигации. - ``` html + ```html foo
  • foo
    • @@ -112,7 +112,7 @@ sidebar: auto Обратите внимание, поэтому `` будет активным для каждого маршрута! Для «режима точного соответствия» укажите в ссылке входной параметр `exact`: - ``` html + ```html ``` @@ -141,7 +141,7 @@ sidebar: auto Поскольку это всего лишь компонент, он работает вместе с `` и ``. При одновременном использовании обоих обязательно располагайте `` внутри: -``` html +```html @@ -166,7 +166,7 @@ sidebar: auto Декларация типа для `RouteConfig`: - ``` js + ```js declare type RouteConfig = { path: string; component?: Component; @@ -290,7 +290,7 @@ sidebar: auto Сигнатуры: -``` js +```js router.beforeEach((to, from, next) => { /* необходимо вызывать `next` */ }) @@ -314,7 +314,7 @@ router.afterEach((to, from) => {}) Сигнатуры: -``` js +```js router.push(location, onComplete?, onAbort?) router.replace(location, onComplete?, onAbort?) router.go(n) @@ -328,7 +328,7 @@ router.forward() Сигнатура: -``` js +```js const matchedComponents: Array = router.getMatchedComponents(location?) ``` @@ -338,7 +338,7 @@ const matchedComponents: Array = router.getMatchedComponents(location Сигнатура: -``` js +```js const resolved: { location: Location; route: Route; @@ -355,7 +355,7 @@ const resolved: { Сигнатура: -``` js +```js router.addRoutes(routes: Array) ``` @@ -365,7 +365,7 @@ router.addRoutes(routes: Array) Сигнатура: -``` js +```js router.onReady(callback, [errorCallback]) ``` @@ -379,7 +379,7 @@ router.onReady(callback, [errorCallback]) Сигнатура: -``` js +```js router.onError(callback) ``` @@ -407,7 +407,7 @@ router.onError(callback) - В качестве двух первых параметров навигационных хуков: - ``` js + ```js router.beforeEach((to, from, next) => { // как `to` так и `from` являются объектами маршрута }) @@ -415,7 +415,7 @@ router.onError(callback) - В качестве двух первых параметров функции `scrollBehavior`: - ``` js + ```js const router = new VueRouter({ scrollBehavior (to, from, savedPosition) { // как `to` так и `from` являются объектами маршрута @@ -461,7 +461,7 @@ router.onError(callback) Массив с **записями маршрутов** для всех вложенных сегментов текущего маршрута. Записи маршрутов — это копии объектов из опции `routes` (и вложенных массивов `children`): - ``` js + ```js const router = new VueRouter({ routes: [ // объект ниже — это запись маршрута diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md index 5e2d20381..1c78ee30e 100644 --- a/docs/ru/guide/README.md +++ b/docs/ru/guide/README.md @@ -12,7 +12,7 @@ ## HTML -``` html +```html @@ -32,7 +32,7 @@ ## JavaScript -``` js +```js // 0. Если используем модульную систему (например через vue-cli), // импортируем Vue и VueRouter и затем вызываем `Vue.use(VueRouter)`. diff --git a/docs/ru/guide/advanced/data-fetching.md b/docs/ru/guide/advanced/data-fetching.md index 018761e31..40c6b6279 100644 --- a/docs/ru/guide/advanced/data-fetching.md +++ b/docs/ru/guide/advanced/data-fetching.md @@ -14,7 +14,7 @@ Предположим, у нас есть компонент `Post`, которому требуется загрузить с сервера данные, соответствующие id поста из `$route.params.id`: -``` html +```html ``` -``` js +```js export default { data () { return { @@ -73,7 +73,7 @@ export default { Используя этот подход, мы запрашиваем данные до завершения перехода к новому маршруту. Запрос данных выполняется в навигационном хуке `beforeRouteEnter` компонента, который вызывает `next`, когда данные получены: -``` js +```js export default { data () { return { diff --git a/docs/ru/guide/advanced/lazy-loading.md b/docs/ru/guide/advanced/lazy-loading.md index b9dbb03d6..b256c762c 100644 --- a/docs/ru/guide/advanced/lazy-loading.md +++ b/docs/ru/guide/advanced/lazy-loading.md @@ -6,13 +6,13 @@ Во-первых, асинхронный компонент можно определить как функцию-фабрику, которая возвращает Promise (который должен разрешиться самим компонентом): -``` js +```js const Foo = () => Promise.resolve({ /* определение компонента */ }) ``` Во-вторых, с Webpack 2 мы можем использовать синтаксис [динамических импортов](https://github.com/tc39/proposal-dynamic-import) для указания точек разделения кода: -``` js +```js import('./Foo.vue') // возвращает Promise ``` @@ -22,13 +22,13 @@ import('./Foo.vue') // возвращает Promise Эти два пункта — всё необходимое, чтобы определить асинхронный компонент, который Webpack автоматически выделит в отдельный фрагмент: -``` js +```js const Foo = () => import('./Foo.vue') ``` В конфигурации маршрута ничего менять не нужно, можно использовать `Foo` как обычно: -``` js +```js const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } @@ -40,7 +40,7 @@ const router = new VueRouter({ Иногда может понадобиться объединить в одном фрагменте все компоненты, расположенные по определённому маршруту. Для этого можно указывать [имена фрагментов Webpack](https://webpack.js.org/guides/code-splitting-async/#chunk-names), используя специальный синтаксис комментариев (в версиях Webpack > 2.4): -``` js +```js const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') diff --git a/docs/ru/guide/advanced/meta.md b/docs/ru/guide/advanced/meta.md index a0ed5b485..18eb2430a 100644 --- a/docs/ru/guide/advanced/meta.md +++ b/docs/ru/guide/advanced/meta.md @@ -2,7 +2,7 @@ Вы можете добавить поле `meta` при определении маршрута: -``` js +```js const router = new VueRouter({ routes: [ { @@ -31,7 +31,7 @@ const router = new VueRouter({ В качестве примера можно привести проверку метаданных в глобальном навигационном хуке: -``` js +```js router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // этот путь требует авторизации, проверяем залогинен ли diff --git a/docs/ru/guide/advanced/navigation-guards.md b/docs/ru/guide/advanced/navigation-guards.md index e6635a53f..8a7c56dd9 100644 --- a/docs/ru/guide/advanced/navigation-guards.md +++ b/docs/ru/guide/advanced/navigation-guards.md @@ -8,7 +8,7 @@ Глобальный хук можно зарегистрировать через `router.beforeEach`: -``` js +```js const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { @@ -44,7 +44,7 @@ router.beforeEach((to, from, next) => { Можно также зарегистрировать глобальные хуки, вызываемые после завершения перехода. Однако, в отличие от сторожевых хуков, в них не передаётся функция `next`, и на навигацию они повлиять не могут: -``` js +```js router.afterEach((to, from) => { // ... }) @@ -54,7 +54,7 @@ router.afterEach((to, from) => { Навигационные хуки `beforeEnter` можно указать напрямую для конкретного маршрута в его конфигурации: -``` js +```js const router = new VueRouter({ routes: [ { @@ -78,7 +78,7 @@ const router = new VueRouter({ - `beforeRouteUpdate` - `beforeRouteLeave` -``` js +```js const Foo = { template: `...`, beforeRouteEnter (to, from, next) { @@ -105,7 +105,7 @@ const Foo = { Тем не менее, доступ к экземпляру можно получить, передав коллбэк в `next`. Эта функция будет вызвана после подтверждения навигации, а экземпляр компонента будет передан в неё в качестве параметра: -``` js +```js beforeRouteEnter (to, from, next) { next(vm => { // экземпляр компонента доступен как `vm` diff --git a/docs/ru/guide/advanced/scroll-behavior.md b/docs/ru/guide/advanced/scroll-behavior.md index cdb9bdf7e..87ccac72f 100644 --- a/docs/ru/guide/advanced/scroll-behavior.md +++ b/docs/ru/guide/advanced/scroll-behavior.md @@ -6,7 +6,7 @@ При создании экземпляра маршрутизатора, вы можете указать функцию `scrollBehavior`: -``` js +```js const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { @@ -26,7 +26,7 @@ const router = new VueRouter({ Например: -``` js +```js scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } @@ -36,7 +36,7 @@ scrollBehavior (to, from, savedPosition) { Возврат `savedPosition` позволяет эмулировать нативное поведение браузера при использовании кнопок назад/вперёд: -``` js +```js scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition @@ -48,7 +48,7 @@ scrollBehavior (to, from, savedPosition) { Эмулировать поведение "прокрутки к якорю" на странице можно так: -``` js +```js scrollBehavior (to, from, savedPosition) { if (to.hash) { return { @@ -67,7 +67,7 @@ scrollBehavior (to, from, savedPosition) { Можно также вернуть Promise, который разрешится объектом с желаемой позицией прокрутки: -``` js +```js scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { diff --git a/docs/ru/guide/advanced/transitions.md b/docs/ru/guide/advanced/transitions.md index 44fbe6971..b88bb068c 100644 --- a/docs/ru/guide/advanced/transitions.md +++ b/docs/ru/guide/advanced/transitions.md @@ -2,7 +2,7 @@ Поскольку `` — это просто динамический компонент, к нему можно применять анимацию перехода с помощью ``: -``` html +```html @@ -14,7 +14,7 @@ Синтаксис выше применяет одну и ту же анимацию перехода для всех маршрутов. Если для различных маршрутов хочется указать разные анимационные эффекты, можно использовать разноимённые `` непосредственно в шаблонах компонентов: -``` js +```js const Foo = { template: ` @@ -36,14 +36,14 @@ const Bar = { Можно также определять анимацию перехода для маршрутов динамически, в зависимости от соотношения между старым и новым маршрутом: -``` html +```html ``` -``` js +```js // затем, в родительском компоненте, будем следить за переменной `$route`, // чтобы определить, какой анимационный переход применять watch: { diff --git a/docs/ru/guide/essentials/dynamic-matching.md b/docs/ru/guide/essentials/dynamic-matching.md index 51d777d6e..f1f983deb 100644 --- a/docs/ru/guide/essentials/dynamic-matching.md +++ b/docs/ru/guide/essentials/dynamic-matching.md @@ -2,7 +2,7 @@ Очень часто нам требуется сопоставить маршруты с заданным шаблоном с одним и тем же компонентом. Например, у нас может быть компонент `User`, который должен отображаться для всех пользователей, но с разными ID пользователей. Во `vue-router` мы можем использовать динамический сегмент в маршруте, чтобы достичь этого: -``` js +```js const User = { template: '
    Пользователь
    ' } @@ -19,7 +19,7 @@ const router = new VueRouter({ Динамический сегмент обозначается двоеточием `:`. При сопоставлении маршрута, значение динамического сегмента можно получить через `this.$route.params` в каждом компоненте. Теперь мы можем отобразить ID текущего пользователя, обновив шаблон компонента `User`: -``` js +```js const User = { template: '
    Пользователь {{ $route.params.id }}
    ' } @@ -42,7 +42,7 @@ const User = { Чтобы реагировать на изменения параметров маршрута в рамках одного компонента, достаточно просто отслеживать изменения в объекте `$route`: -``` js +```js const User = { template: '...', watch: { @@ -55,7 +55,7 @@ const User = { Или можно воспользоваться [хуком `beforeRouteUpdate`](../advanced/navigation-guards.md), добавленным в версии 2.2: -``` js +```js const User = { template: '...', beforeRouteUpdate (to, from, next) { diff --git a/docs/ru/guide/essentials/history-mode.md b/docs/ru/guide/essentials/history-mode.md index 0fded94ef..1128c3b79 100644 --- a/docs/ru/guide/essentials/history-mode.md +++ b/docs/ru/guide/essentials/history-mode.md @@ -4,7 +4,7 @@ Мы можем обойтись без хэша, используя **режим history**, который работает с API `history.pushState` для достижения той же цели: -``` js +```js const router = new VueRouter({ mode: 'history', routes: [...] @@ -126,7 +126,7 @@ rewrite { При таком подходе возникает одно неприятное последствие: ваш сервер больше не будет сообщать об ошибках 404, поскольку все найденные пути теперь возвращают `index.html`. Чтобы обойти эту проблему, вы должны реализовать специальный маршрут в своём приложении Vue, чтобы показывать страницу 404: -``` js +```js const router = new VueRouter({ mode: 'history', routes: [ diff --git a/docs/ru/guide/essentials/named-routes.md b/docs/ru/guide/essentials/named-routes.md index 6552c6862..d5bd7da53 100644 --- a/docs/ru/guide/essentials/named-routes.md +++ b/docs/ru/guide/essentials/named-routes.md @@ -2,7 +2,7 @@ Иногда удобнее определять маршрут по имени, особенно при привязке к маршруту или выполнении навигации. Вы можете указать для маршрута имя в опции `routes` при создании экземпляра маршрутизатора: -``` js +```js const router = new VueRouter({ routes: [ { @@ -16,13 +16,13 @@ const router = new VueRouter({ Чтобы создать ссылку на именованный маршрут, вы можете передать объект во входной параметр `to` компонента `router-link`: -``` html +```html Пользователь ``` Тот же самый объект можно использовать и для программного вызова `router.push()`: -``` js +```js router.push({ name: 'user', params: { userId: 123 }}) ``` diff --git a/docs/ru/guide/essentials/named-views.md b/docs/ru/guide/essentials/named-views.md index 66a5831a8..2e9908a72 100644 --- a/docs/ru/guide/essentials/named-views.md +++ b/docs/ru/guide/essentials/named-views.md @@ -2,7 +2,7 @@ Иногда вам необходимо отображать сразу несколько представлений, а не вкладывать одно из них в другое — например, при создании шаблона с представлением `sidebar` для боковой панели и представлением `main` для основного содержимого. В этой ситуации будет удобно использовать именованные представления. Вместо указания единственного ``, можно использовать несколько, присвоив каждому собственное имя. Безымянный `router-view` автоматически получает имя `default`. -``` html +```html @@ -10,7 +10,7 @@ При использовании нескольких представлений, вместо единственного компонента при описании пути необходимо указывать объект. Убедитесь, что в ключе `components` используете окончание множественного числа (`s`): -``` js +```js const router = new VueRouter({ routes: [ { diff --git a/docs/ru/guide/essentials/nested-routes.md b/docs/ru/guide/essentials/nested-routes.md index c89e8f8f6..efc89452b 100644 --- a/docs/ru/guide/essentials/nested-routes.md +++ b/docs/ru/guide/essentials/nested-routes.md @@ -17,13 +17,13 @@ Рассмотрим созданное в предыдущем разделе приложение: -``` html +```html
    ``` -``` js +```js const User = { template: '
    Пользователь {{ $route.params.id }}
    ' } @@ -37,7 +37,7 @@ const router = new VueRouter({ Здесь `` — это точка, в которой будет отображён компонент, соответствующий маршруту верхнего уровня. Аналогичным образом, отображаемый там компонент может и сам содержать вложенный ``. Изменим немного шаблон компонента `User`: -``` js +```js const User = { template: `
    @@ -50,7 +50,7 @@ const User = { Для отображения компонентов в этой вложенной точке, нам понадобится опция `children` в конфигурации конструктора `VueRouter`: -``` js +```js const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, @@ -79,7 +79,7 @@ const router = new VueRouter({ С текущим кодом, если перейти по пути `/user/foo`, внутри компонента `User` ничего не будет отображаться, так как не произойдёт совпадения по второй части пути. Может быть, что-то в таких случаях отобразить всё же захочется — тогда стоит указать пустой путь: -``` js +```js const router = new VueRouter({ routes: [ { diff --git a/docs/ru/guide/essentials/passing-props.md b/docs/ru/guide/essentials/passing-props.md index a70451469..768eb7543 100644 --- a/docs/ru/guide/essentials/passing-props.md +++ b/docs/ru/guide/essentials/passing-props.md @@ -6,7 +6,7 @@ **Вместо жёсткой связи с `$route`** -``` js +```js const User = { template: '
    Пользователь {{ $route.params.id }}
    ' } @@ -19,7 +19,7 @@ const router = new VueRouter({ **Разделяем с помощью входных параметров** -``` js +```js const User = { props: ['id'], template: '
    Пользователь {{ id }}
    ' @@ -49,7 +49,7 @@ const router = new VueRouter({ Когда `props` объект, они будут устанавливаться входными параметрами компонента как есть. Полезно, когда входные параметры являются статическими данными. -``` js +```js const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } @@ -61,7 +61,7 @@ const router = new VueRouter({ Вы можете создать функцию, которая вернёт объект с входными параметрами. Это позволяет вам приводить параметры к другим типам, комбинировать статические значения с значениями из маршрута, и т.д. -``` js +```js const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } diff --git a/docs/ru/guide/essentials/redirect-and-alias.md b/docs/ru/guide/essentials/redirect-and-alias.md index 330fc73fa..bcd7c5758 100644 --- a/docs/ru/guide/essentials/redirect-and-alias.md +++ b/docs/ru/guide/essentials/redirect-and-alias.md @@ -4,7 +4,7 @@ Перенаправления также определяются в конфигурации маршрутов в опции `routes`. Например, чтобы перенаправить с `/a` на `/b`: -``` js +```js const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } @@ -14,7 +14,7 @@ const router = new VueRouter({ Перенаправление может осуществляться и на именованный маршрут: -``` js +```js const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} @@ -24,7 +24,7 @@ const router = new VueRouter({ Или даже можно указать функцию для организации динамического перенаправления: -``` js +```js const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { @@ -47,7 +47,7 @@ const router = new VueRouter({ В виде конфигурации маршрутизатора вышесказанное может быть выражено так: -``` js +```js const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } diff --git a/docs/ru/installation.md b/docs/ru/installation.md index a1bbfad82..58c82ceb5 100644 --- a/docs/ru/installation.md +++ b/docs/ru/installation.md @@ -10,20 +10,20 @@ Подключите `vue-router` после Vue, и установка произойдёт автоматически: -``` html +```html ``` ## npm -``` bash +```bash npm install vue-router ``` При использовании модульной системы, необходимо явно обозначить использование роутера при помощи `Vue.use()`: -``` js +```js import Vue from 'vue' import VueRouter from 'vue-router' @@ -36,7 +36,7 @@ Vue.use(VueRouter) Если вы хотите использовать самую новую dev-сборку `vue-router`, то придётся вручную склонировать репозиторий с GitHub и запустить сборку: -``` bash +```bash git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install From 5cade4fa22bf83a3c51f1a921df7cbab3575f114 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Fri, 7 Dec 2018 12:51:53 +0300 Subject: [PATCH 05/22] dynamic-matching.md add new section --- docs/ru/guide/essentials/dynamic-matching.md | 30 ++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docs/ru/guide/essentials/dynamic-matching.md b/docs/ru/guide/essentials/dynamic-matching.md index f1f983deb..ea6358a18 100644 --- a/docs/ru/guide/essentials/dynamic-matching.md +++ b/docs/ru/guide/essentials/dynamic-matching.md @@ -65,6 +65,36 @@ const User = { } ``` +## Страница ошибки 404 / отслеживание ненайденных путей + +Обычные параметры соответствуют символам между фрагментами URL, разделёнными `/`. При необходимости чтобы совпадало **что угодно** можно воспользоваться звёздочкой (`*`): + +```js +{ + // сопоставляется со всем + path: '*' +} +{ + // сопоставляется со всем, начинающимся с `/user-` + path: '/user-*' +} +``` + +Если используете маршруты со _звёздочкой_, убедитесь в их правильном порядке, чтобы они были в конце. +Маршрут `{ path; '*' }` обычно используют для страницы ошибки 404 на стороне клиента. При использовании _Режима HTML5 History_ также проверьте что [правильно сконфигурировали сервер](./history-mode.md). + +При наличии _звёздочки_ в `$route.params` автоматически добавляется свойство `pathMatch`. Оно будет содержать оставшуюся часть URL-адреса, сопоставленную со _звёздочкой_: + +```js +// Существует маршрут { path: '/user-*' } +this.$router.push('/user-admin') +this.$route.params.pathMatch // 'admin' + +// Существует маршрут { path: '*' } +this.$router.push('/non-existing') +this.$route.params.pathMatch // '/non-existing' +``` + ## Продвинутые возможности сопоставления `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`. From 2d6ade32561ab0bc04c53a9e6e686799dc335dd0 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Wed, 9 Jan 2019 23:31:35 +0300 Subject: [PATCH 06/22] dynamic-matching.md fix --- docs/ru/guide/essentials/dynamic-matching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/guide/essentials/dynamic-matching.md b/docs/ru/guide/essentials/dynamic-matching.md index ea6358a18..f3e450402 100644 --- a/docs/ru/guide/essentials/dynamic-matching.md +++ b/docs/ru/guide/essentials/dynamic-matching.md @@ -81,7 +81,7 @@ const User = { ``` Если используете маршруты со _звёздочкой_, убедитесь в их правильном порядке, чтобы они были в конце. -Маршрут `{ path; '*' }` обычно используют для страницы ошибки 404 на стороне клиента. При использовании _Режима HTML5 History_ также проверьте что [правильно сконфигурировали сервер](./history-mode.md). +Маршрут `{ path: '*' }` обычно используют для страницы ошибки 404 на стороне клиента. При использовании _Режима HTML5 History_ также проверьте что [правильно сконфигурировали сервер](./history-mode.md). При наличии _звёздочки_ в `$route.params` автоматически добавляется свойство `pathMatch`. Оно будет содержать оставшуюся часть URL-адреса, сопоставленную со _звёздочкой_: From 7c18acb66f25c811d41cadf215b61e12009d7262 Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Sun, 27 Jan 2019 11:44:32 +0300 Subject: [PATCH 07/22] navigation-guards.md fix title --- docs/ru/guide/advanced/navigation-guards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/guide/advanced/navigation-guards.md b/docs/ru/guide/advanced/navigation-guards.md index 8a7c56dd9..f0ccf8adb 100644 --- a/docs/ru/guide/advanced/navigation-guards.md +++ b/docs/ru/guide/advanced/navigation-guards.md @@ -4,7 +4,7 @@ Следует помнить, что **изменение параметров маршрута не вызывает выполнения навигационных хуков enter/leave**. Вы можете добавить [watch на объект `$route`](../essentials/dynamic-matching.md#отсnеживание-изменений-параметров) для отслеживания этих изменений, или использовать хук `beforeRouteUpdate`. -## Глобальные хуки +## Глобальные хуки (до навигационных хуков) Глобальный хук можно зарегистрировать через `router.beforeEach`: From 12c00339802e35f9be1aef216c3e022ad37fbaff Mon Sep 17 00:00:00 2001 From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> Date: Mon, 6 May 2019 10:23:14 +0300 Subject: [PATCH 08/22] data-fetching.md fix --- docs/ru/guide/advanced/data-fetching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/guide/advanced/data-fetching.md b/docs/ru/guide/advanced/data-fetching.md index 40c6b6279..b8786bc44 100644 --- a/docs/ru/guide/advanced/data-fetching.md +++ b/docs/ru/guide/advanced/data-fetching.md @@ -17,7 +17,7 @@ ```html