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 - Настраиваемое поведение прокрутки страницы 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..ea6358a18 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) { @@ -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`. 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/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) 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