diff --git a/docs/guide/essentials/navigation.md b/docs/guide/essentials/navigation.md index 39f023029..37c0ccfbf 100644 --- a/docs/guide/essentials/navigation.md +++ b/docs/guide/essentials/navigation.md @@ -47,7 +47,7 @@ router.push({ path: '/user', params: { userId } }) // -> /user The same rules apply for the `to` property of the `router-link` component. In 2.2.0+, optionally provide `onComplete` and `onAbort` callbacks to `router.push` or `router.replace` as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively. -In 3.1.0+, you can ommit the 2nd and 3rd parameter and `router.push`/`router.replace` will return a promise instead if Promises are supported. +In 3.1.0+, you can omit the 2nd and 3rd parameter and `router.push`/`router.replace` will return a promise instead if Promises are supported. **Note:** If the destination is the same as the current route and only params are changing (e.g. going from one profile to another `/users/1` -> `/users/2`), you will have to use [`beforeRouteUpdate`](./dynamic-matching.md#reacting-to-params-changes) to react to changes (e.g. fetching the user information). diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md index ac65b6cd5..ab2382aa6 100644 --- a/docs/ru/api/README.md +++ b/docs/ru/api/README.md @@ -13,22 +13,52 @@ sidebar: auto `` предпочтительнее `` по следующим причинам: - Он работает одинаково вне зависимости от режима работы (HTML5 history или хэш), поэтому если вы решите переключить режим, или маршрутизатор для совместимости переключится обратно в режим хэша в IE9, ничего не потребуется изменять. - - В режиме HTML5 history, `router-link` будет перехватывать событие click, чтобы браузер не пытался перезагрузить страницу. - - При использовании опции `base` в режиме работы HTML5 history, вам не потребуется добавлять её в URL входного параметра `to`. -### Применение активного класса к внешнему элементу +### `v-slot` API (3.1.0+) + +`router-link` предоставляет возможность более низкоуровневой настройки с помощью [слота с ограниченной областью видимости](https://ru.vuejs.org/v2/guide/components-slots.html#%D0%A1%D0%BB%D0%BE%D1%82%D1%8B-%D1%81-%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%BD%D0%BE%D0%B9-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C%D1%8E-%D0%B2%D0%B8%D0%B4%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8). Это более продвинутое API ориентировано в первую очередь на создателей библиотек, но может пригодиться и разработчикам, к примеру для создании пользовательских компонентов таких как _NavLink_ или подобных. -Иногда может потребоваться применять активный класс к внешнему элементу, а не к тегу ``, в этом случае можно отобразить внешний элемент с помощью `` и обернуть содержимое тегом `` внутри: +**При использовании API `v-slot` необходимо передавать один дочерний элемент в `router-link`**. Если этого не сделать, `router-link` обернёт все дочерние элементы в `span`. ```html - - /foo + + + {{ route.fullPath }} + ``` -В этом случае `` будет фактической ссылкой (и получит правильный `href`), но активный класс будет применён к внешнему `
  • `. +- `href`: разрешённый URL. Это будет атрибутом `href` для элемента `a` +- `route`: разрешённый нормализованный маршрут +- `navigate`: функция для запуска навигации. **Она автоматически предотвращает события, когда это необходимо**, аналогичным способом, как это делает `router-link` +- `isActive`: `true` если [активный класс](#active-class) должен применяться. Позволяет применить произвольный класс +- `isExactActive`: `true` если [активный класс при точном совпадении пути](#exact-active-class) должен применяться. Позволяет применить произвольный класс + +### Пример: Добавление активного класса к внешнему элементу + +Иногда может потребоваться применять активный класс к внешнему элементу, а не к тегу ``, в этом случае можно обернуть этот элемент в `` и использовать свойства `v-slot` для создания ссылки: + +```html + +
  • + {{ route.fullPath }} +
    • +     +``` + +:::tip ПРИМЕЧАНИЕ +При добавлении `target="_blank"` на элемент `a`, необходимо опустить обработчик `@click="navigate"`. +::: ## Входные параметры `` @@ -58,7 +88,9 @@ sidebar: auto User - Register + + Регистрация + ``` ### replace @@ -114,7 +146,7 @@ sidebar: auto ```html - + ``` Ознакомьтесь с другими примерами активных классов ссылок [вживую](https://jsfiddle.net/8xrk1n9f/). @@ -166,22 +198,22 @@ sidebar: auto Декларация типа для `RouteConfig`: - ```js - declare type RouteConfig = { - path: string; - component?: Component; - name?: string; // для именованных маршрутов - components?: { [name: string]: Component }; // для именованных представлений - redirect?: string | Location | Function; - props?: boolean | Object | Function; - alias?: string | Array; - children?: Array; // для вложенных маршрутов - beforeEnter?: (to: Route, from: Route, next: Function) => void; - meta?: any; + ```ts + interface RouteConfig = { + path: string, + component?: Component, + name?: string, // для именованных маршрутов + components?: { [name: string]: Component }, // для именованных представлений + redirect?: string | Location | Function, + props?: boolean | Object | Function, + alias?: string | Array, + children?: Array, // для вложенных маршрутов + beforeEnter?: (to: Route, from: Route, next: Function) => void, + meta?: any, // Добавлено в версии 2.6.0+ - caseSensitive?: boolean; // учитывать регистр при сравнении? (по умолчанию: false) - pathToRegexpOptions?: Object; // настройки path-to-regexp для компиляции regex + caseSensitive?: boolean, // учитывать регистр при сравнении? (по умолчанию: false) + pathToRegexpOptions?: Object // настройки path-to-regexp для компиляции regex } ``` @@ -285,7 +317,9 @@ sidebar: auto ## Методы экземпляра Router ### router.beforeEach + ### router.beforeResolve + ### router.afterEach Сигнатуры: @@ -307,16 +341,22 @@ router.afterEach((to, from) => {}) Все три метода возвращают функцию для удаления зарегистрированного хука. ### router.push + ### router.replace + ### router.go + ### router.back + ### router.forward Сигнатуры: ```js router.push(location, onComplete?, onAbort?) +router.push(location).then(onComplete).catch(onAbort) router.replace(location, onComplete?, onAbort?) +router.replace(location).then(onComplete).catch(onAbort) router.go(n) router.back() router.forward() @@ -425,37 +465,37 @@ router.onError(callback) ### Свойства объекта Route -- **$route.path** +- **\$route.path** - тип: `string` Строка пути текущего маршрута, всегда в абсолютном формате, например `"/foo/bar"`. -- **$route.params** +- **\$route.params** - тип: `Object` Объект, который содержит пары ключ/значение динамических сегментов маршрута (включая *-сегменты). Если параметров нет, то значением будет пустой объект. -- **$route.query** +- **\$route.query** - тип: `Object` Объект, который содержит пары ключ/значение строки запроса (query string). Например, для пути `/foo?user=1` получим `$route.query.user == 1`. Если строки запроса нет, то значением будет пустой объект. -- **$route.hash** +- **\$route.hash** - тип: `string` Хэш текущего маршрута (вместе с символом `#`) при его наличии. Если хэша нет, то значением будет пустая строка. -- **$route.fullPath** +- **\$route.fullPath** - тип: `string` Полная запись URL-адреса, включая строку запроса и хэш. -- **$route.matched** +- **\$route.matched** - тип: `Array` @@ -465,7 +505,9 @@ router.onError(callback) const router = new VueRouter({ routes: [ // объект ниже — это запись маршрута - { path: '/foo', component: Foo, + { + path: '/foo', + component: Foo, children: [ // это — тоже запись маршрута { path: 'bar', component: Bar } @@ -477,11 +519,11 @@ router.onError(callback) Для URL `/foo/bar`, значение `$route.matched` будет массивом, содержащим копии объектов (клоны), в порядке сортировки от родителя к потомку. -- **$route.name** +- **\$route.name** Имя текущего маршрута, если было указано. (Подробнее в разделе [именованные маршруты](../guide/essentials/named-routes.md)) -- **$route.redirectedFrom** +- **\$route.redirectedFrom** Имя маршрута с которого произошло перенаправление, если было указано. (Подробнее в разделе [перенаправления и псевдонимы](../guide/essentials/redirect-and-alias.md)) @@ -491,11 +533,11 @@ router.onError(callback) Эти свойства внедряются в каждый дочерний компонент, передавая экземпляр маршрутизатора в корневой экземпляр в качестве опции `router`. -- **this.$router** +- **this.\$router** Экземпляр маршрутизатора. -- **this.$route** +- **this.\$route** Текущий активный [маршрут](#объект-route). Это свойство только для чтения и все его свойства иммутабельны, но можно отслеживать их изменения. 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