Ссылка на API

<router-link> Свойства

to

• Тип: RouteLocationRaw

• Подробности:

  Указывает целевой маршрут ссылки. При нажатии значение свойства to будет передано в router.push() внутри, поэтому оно может быть string или объектом расположения маршрута объектом расположения маршрута.

<!-- literal string -->
<router-link to="/home">Home</router-link>
<!-- renders to -->
<a href="/home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link :to="'/home'">Home</router-link>

<!-- same as above -->
<router-link :to="{ path: '/home' }">Home</router-link>

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

replace

• Тип: boolean

• По умолчанию: false

• Подробности:

  Установка свойства replace вызовет router.replace() вместо router.push() при нажатии, так что навигация не оставит запись в истории.

<router-link to="/abc" replace></router-link>

active-class

• Тип: string

• По умолчанию: "router-link-active" (или глобальный linkActiveClass)

• Подробности:

  Класс, который будет применен к отрисованной <a> при активации ссылки.

aria-current-value

• Тип: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' (string)

• По умолчанию: "page"

• Подробности:

  Значение, передаваемое атрибуту aria-current при точной активации ссылки.

custom

• Тип: boolean

• По умолчанию: false

• Подробности:

  Указывает, нужно ли <router-link> не заключать свой контент в элемент <a>. Полезно при использовании v-slot для создания пользовательской RouterLink. По умолчанию <router-link> отобразит свой контент, заключенный в элемент <a>, даже при использовании v-slot. Передача свойства custom убирает это поведение.

• Примеры:

  <router-link to="/home" custom v-slot="{ navigate, href, route }">
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </router-link>
  

  Отображает <a href="/home">/home</a>.

  <router-link to="/home" v-slot="{ route }">
    <span>{{ route.fullPath }}</span>
  </router-link>
  

  Отображает <a href="/home"><span>/home</span></a>.

exact-active-class

• Тип: string

• По умолчанию: "router-link-exact-active" (или глобальный linkExactActiveClass)

• Подробности:

  Класс, который будет применён к отрисованной <a> при точной активации ссылки.

<router-link>'s v-slot

<router-link> предоставляет низкоуровневую настройку через дочерний слот. Это более продвинутый API, предназначенный в первую очередь для авторов библиотек, но может быть полезен и разработчикам для создания пользовательского компонента, такого как NavLink или другого.

СОВЕТ

Не забудьте передать опцию custom к <router-link>, чтобы предотвратить обертывание её содержимого в элемент <a>.

<router-link
  to="/about"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <NavLink :active="isActive" :href="href" @click="navigate">
    {{ route.fullPath }}
  </NavLink>
</router-link>

• href: решенный URL. Это атрибут href элемента <a>. Он содержит base, если он был предоставлен.
• route: решенное нормализованное расположение.
• navigate: функция для запуска навигации. Она автоматически предотвратит события при необходимости, так же, как и router-link, например, ctrl или cmd + клик всё равно будут проигнорированы navigate.
• isActive: true если нужно применить класс активного класса. Позволяет применять произвольный класс.
• isExactActive: true если нужно применить класс точности активного класса. Позволяет применять произвольный класс.

Пример: применение активного класса к внешнему элементу

Иногда нам может потребоваться, чтобы активный класс применялся к внешнему элементу, а не к самому элементу <a>, в этом случае вы можете обернуть этот элемент в router-link и использовать свойства v-slot для создания вашей ссылки:

<router-link
  to="/foo"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

СОВЕТ

Если вы добавите target="_blank" к элементу a, вы должны пропустить обработчик @click="navigate".

<router-view> Свойства

name

• Тип: string

• По умолчанию: "default"

• Подробности:

  Когда у <router-view> есть name, он отобразит компонент с соответствующим именем в опции components записи сопоставленного маршрута.

• См. также: Именованные представления

route

• Тип: RouteLocationNormalized

• Подробности:

  Расположение маршрута, в котором все компоненты решены (если какой-либо из них загружался лениво), поэтому его можно отобразить.

<router-view>'s v-slot

<router-view> предоставляет v-slot API для обертывания ваших компонентов маршрута компонентами <transition> и <keep-alive>.

<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive>
      <suspense>
        <template #default>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </template>
        <template #fallback> Loading... </template>
      </suspense>
    </keep-alive>
  </transition>
</router-view>

• Component: VNodes, передаваемые свойству <component>'s is.
• route: решенное нормализованное расположение маршрута.

createRouter

Создает экземпляр Router, который может использоваться приложением Vue. Проверьте RouterOptions для списка всех свойств, которые можно передать.

Подпись:

export declare function createRouter(options: RouterOptions): Router

Параметры

createWebHistory

Создаёт историю HTML5. Самая распространённая история для одностраничных приложений. Приложение должно быть обслуживаемо через протокол http.

Подпись:

export declare function createWebHistory(base?: string): RouterHistory

Параметры

Примеры

createWebHistory() // No base, the app is hosted at the root of the domain `https://example.com`
createWebHistory('/folder/') // gives a url of `https://example.com/folder/`

createWebHashHistory

Создаёт историю хэша. Полезно для веб-приложений без хоста (например, file://) или когда настройка сервера для обработки любого URL невозможна. Обратите внимание, что вы должны использовать createWebHistory, если для вас важна SEO-оптимизация.

Подпись:

export declare function createWebHashHistory(base?: string): RouterHistory

Параметры

Примеры

// at https://example.com/folder
createWebHashHistory() // gives a url of `https://example.com/folder#`
createWebHashHistory('/folder/') // gives a url of `https://example.com/folder/#`
// if the `#` is provided in the base, it won't be added by `createWebHashHistory`
createWebHashHistory('/folder/#/app/') // gives a url of `https://example.com/folder/#/app/`
// you should avoid doing this because it changes the original url and breaks copying urls
createWebHashHistory('/other-folder/') // gives a url of `https://example.com/other-folder/#`

// at file:///usr/etc/folder/index.html
// for locations with no `host`, the base is ignored
createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/index.html#`

createMemoryHistory

Создаёт историю в памяти. Основное назначение этой истории — обработка SSR. Она начинается в специальном месте, которое нигде не находится. Если пользователь не находится в контексте браузера, он должен заменить это место начальным местоположением, вызвав либо router.push(), либо router.replace().

Подпись:

export declare function createMemoryHistory(base?: string): RouterHistory

Параметры

Возвращаемое значение

Объект истории, который можно передать в конструктор маршрутизатора

NavigationFailureType

Перечисление со всеми возможными типами сбоев навигации. Может быть передано в isNavigationFailure для проверки конкретных сбоев. Никогда не используйте числовые значения, всегда используйте переменные, такие как NavigationFailureType.aborted.

Подпись:

export declare enum NavigationFailureType

Члены

START_LOCATION

• Тип: RouteLocationNormalized

• Подробности:

  Начальная позиция маршрута, где находится маршрутизатор. Может использоваться в сторожевых механизмах навигации для различения начальной навигации.

  import { START_LOCATION } from 'vue-router'
  
  router.beforeEach((to, from) => {
    if (from === START_LOCATION) {
      // initial navigation
    }
  })
  

API композиции

onBeforeRouteLeave

Добавляет сторожевой механизм навигации, который срабатывает всякий раз, когда компонент для текущей позиции собирается покинуть. Аналогично beforeRouteLeave но может использоваться в любом компоненте. Сторожевой механизм удаляется при размонтировании компонента.

Подпись:

export declare function onBeforeRouteLeave(leaveGuard: NavigationGuard): void

Параметры

onBeforeRouteUpdate

Добавляет сторожевой механизм навигации, который срабатывает всякий раз, когда текущая позиция собирается обновиться. Аналогично beforeRouteUpdate но может использоваться в любом компоненте. Сторожевой механизм удаляется при размонтировании компонента.

Подпись:

export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void

Параметры

useLink

Возвращает все, что экспонируется v-slot API.

Подпись:

export declare function useLink(props: RouterLinkOptions): {
  route: ComputedRef<RouteLocationNormalized & { href: string }>,
  href: ComputedRef<string>,
  isActive: ComputedRef<boolean>,
  isExactActive: ComputedRef<boolean>,
  navigate: (event?: MouseEvent) => Promise(NavigationFailure | void),
}

Параметры

useRoute

Возвращает текущую позицию маршрута. Эквивалентно использованию $route внутри шаблонов. Должно вызываться внутри setup().

Подпись:

export declare function useRoute(): RouteLocationNormalized

useRouter

Возвращает экземпляр маршрутизатора. Эквивалентно использованию $router внутри шаблонов. Должно вызываться внутри setup().

Подпись:

export declare function useRouter(): Router

TypeScript

Вот некоторые интерфейсы и типы, используемые Vue Router. Документация ссылается на них, чтобы дать вам представление о существующих свойствах в объектах.

Свойства маршрутизатора

currentRoute

• Тип: Ref<RouteLocationNormalized>

• Подробности:

  Текущая позиция маршрута. Только для чтения.

options

• Тип: RouterOptions

• Подробности:

  Исходный объект опций, переданный для создания Router. Только для чтения.

Методы маршрутизатора

addRoute

Добавляет новую запись маршрута Route Record в качестве дочерней записи существующего маршрута. Если маршрут имеет name и уже существует запись с таким же именем, то она сначала удаляется.

Подпись:

addRoute(parentName: string | symbol, route: RouteRecordRaw): () => void

Параметры

addRoute

Добавляет новую запись маршрута route record в маршрутизатор. Если маршрут имеет name и уже существует запись с таким же именем, то она сначала удаляется.

Подпись:

addRoute(route: RouteRecordRaw): () => void

Параметры

СОВЕТ

Добавление маршрутов не запускает новую навигацию, что означает, что добавленный маршрут не будет отображен, пока не будет запущена новая навигация.

afterEach

Добавляет обработчик навигации, который выполняется после каждой навигации. Возвращает функцию, которая удаляет зарегистрированный обработчик.

Подпись:

afterEach(guard: NavigationHookAfter): () => void

Параметры

Примеры

router.afterEach((to, from, failure) => {
  if (isNavigationFailure(failure)) {
    console.log('failed navigation', failure)
  }
})

back

Возвращается назад в истории, если это возможно, вызвав history.back(). Эквивалентно router.go(-1).

Подпись:

back(): void

beforeEach

Добавляет сторожевой механизм навигации, который выполняется перед любой навигацией. Возвращает функцию, которая удаляет зарегистрированный сторожевой механизм.

Подпись:

beforeEach(guard: NavigationGuard): () => void

Параметры

beforeResolve

Добавляет сторожевой механизм навигации, который выполняется перед разрешением навигации. На данном этапе все компоненты были получены, и другие сторожевые механизмы навигации завершились успешно. Возвращает функцию, которая удаляет зарегистрированный сторожевой механизм.

Подпись:

beforeResolve(guard: NavigationGuard): () => void

Параметры

Примеры

router.beforeResolve(to => {
  if (to.meta.requiresAuth && !isAuthenticated) return false
})

forward

Переходит вперёд в истории, если это возможно, вызвав history.forward(). Эквивалентно router.go(1).

Подпись:

forward(): void

getRoutes

Получает полный список всех записей маршрута route records.

Подпись:

getRoutes(): RouteRecord[]

go

Позволяет перемещаться вперёд или назад по истории.

Подпись:

go(delta: number): void

Параметры

hasRoute

Проверяет, существует ли маршрут с заданным именем

Подпись:

hasRoute(name: string | symbol): boolean

Параметры

isReady

Возвращает Promise, который разрешается, когда маршрутизатор завершает начальную навигацию, что означает, что он разрешил все асинхронные обработчики входа и асинхронные компоненты, связанные с начальным маршрутом. Если начальная навигация уже произошла, обещание выполняется немедленно. Это полезно при рендеринге на стороне сервера, чтобы обеспечить согласованный вывод как на сервере, так и на клиенте. Обратите внимание, что на серверной стороне вам необходимо вручную выполнить начальную позицию, в то время как на клиентской стороне маршрутизатор автоматически получает её из URL.

Подпись:

isReady(): Promise<void>

onError

Добавляет обработчик ошибок, который вызывается каждый раз, когда происходит необработанная ошибка во время навигации. Это включает ошибки, сгенерированные синхронно и асинхронно, ошибки, возвращаемые или переданные next в любом сторожевом механизме навигации, и ошибки, возникшие при попытке разрешить асинхронный компонент, необходимый для отображения маршрута.

Подпись:

onError(handler: (error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any): () => void

Параметры

push

Программно перенаправляет на новый URL, добавив запись в стек истории.

Подпись:

push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>

Параметры

removeRoute

Удаляет существующий маршрут по его имени.

Подпись:

removeRoute(name: string | symbol): void

Параметры

replace

Программно перенаправьте на новый URL, заменив текущую запись в стеке истории.

Подпись:

replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>

Параметры

resolve

Возвращает нормализованную версию местоположения маршрута. Также включает свойство href, которое содержит все имеющиеся base.

Подпись:

resolve(to: RouteLocationRaw): RouteLocation & {
  href: string
}

Параметры

RouterOptions

history

Реализация истории, используемая маршрутизатором. Большинство веб-приложений должны использовать createWebHistory, но это требует правильной конфигурации сервера. Вы также можете использовать историю на основе хэша с createWebHashHistory, которая не требует никакой конфигурации на сервере, но не обрабатывается поисковыми системами и плохо сказывается на SEO.

Подпись:

history: RouterHistory

Примеры

createRouter({
  history: createWebHistory(),
  // other options...
})

linkActiveClass

По умолчанию класс, применяемый к активной RouterLink. Если не указано, будет применено router-link-active.

Подпись:

linkActiveClass?: string

linkExactActiveClass

По умолчанию класс, применяемый к точно активной RouterLink. Если не указано, будет применено router-link-exact-active.

Подпись:

linkExactActiveClass?: string

parseQuery

Пользовательская реализация для парсинга запроса. Должен декодировать ключи и значения запроса. См. аналог stringifyQuery.

Подпись:

parseQuery?: (searchQuery: string) => Record<string, (string | null)[] | string | null>

Примеры

Предположим, вы хотите использовать пакет qs для парсинга запросов, вы можете предоставить как parseQuery, так и stringifyQuery:

import qs from 'qs'

createRouter({
  // other options...
  parseQuery: qs.parse,
  stringifyQuery: qs.stringify,
})

routes

Начальный список маршрутов, который должен быть добавлен в маршрутизатор.

Подпись:

routes: RouteRecordRaw[]

scrollBehavior

Функция для управления прокруткой при переходе между страницами. Может возвращать промис, чтобы отложить прокрутку. См. Скрипт поведения прокрутки для получения более подробной информации.

Подпись:

scrollBehavior?: RouterScrollBehavior

Примеры

function scrollBehavior(to, from, savedPosition) {
  // `to` and `from` are both route locations
  // `savedPosition` can be null if there isn't one
}

stringifyQuery

Пользовательская реализация для сериализации объекта запроса. Не должен добавлять ведущий ?. Должен правильно кодировать ключи и значения запроса. Аналог parseQuery для обработки парсинга запросов.

Подпись:

stringifyQuery?: (
  query: Record<
    string | number,
    string | number | null | undefined | (string | number | null | undefined)[]
  >
) => string

RouteRecordRaw

Запись маршрута, которую пользователь может предоставить при добавлении маршрутов через routes параметр или через router.addRoute(). Существует три различных типа записей маршрутов:

• Записи отдельных представлений: имеют параметр component
• Записи нескольких представлений (именованные представления): имеют параметр components
• Записи перенаправления: не могут иметь параметры component или components , так как запись перенаправления никогда не достигается.

path

• Тип: string

• Подробности:

  Путь записи. Должен начинаться с / , если запись не является дочерней записью другой записи. Может определять параметры: /users/:id соответствует /users/1 а также /users/posva.

• См. также: Динамическое соответствие маршрутам

redirect

• Тип: RouteLocationRaw | (to: RouteLocationNormalized) => RouteLocationRaw (Необязательно)

• Подробности:

  Куда перенаправить, если маршрут непосредственно совпадает. Перенаправление происходит до любой стражи навигации и запускает новую навигацию с новым целевым местоположением. Также может быть функцией, которая получает целевое местоположение маршрута и возвращает местоположение, на которое следует перенаправить.

children

• Тип: Массив RouteRecordRaw (Необязательно)

• Подробности:

  Вложенные маршруты текущей записи.

• См. также: Вложенные маршруты

alias

• Тип: string | string[] (Необязательно)

• Подробности:

  Псевдонимы маршрута. Позволяет определить дополнительные пути, которые будут вести себя как копия записи. Это позволяет использовать сокращения путей, например, /users/:id и /u/:id. Все значения alias и path должны иметь одни и те же параметры.

name

• Тип: string | symbol (Необязательно)

• Подробности:

  Уникальное имя для записи маршрута.

beforeEnter

• Тип: NavigationGuard | NavigationGuard[] (Необязательно)

• Подробности:

  Стража входа, специфичная для этой записи. Обратите внимание, что beforeEnter не имеет эффекта, если у записи есть свойство redirect.

props

• Тип: boolean | Record<string, any> | (to: RouteLocationNormalized) => Record<string, any> (Необязательно)

• Подробности:

  Позволяет передавать параметры в качестве свойств компоненту, отображаемому router-view. При передаче записи с несколькими представлениями, это должен быть объект с теми же ключами, что и components или boolean, который будет применён к каждому компоненту. целевое местоположение.

• См. также: Передача свойств компонентам маршрута

meta

• Тип: RouteMeta (Необязательно)

• Подробности:

  Пользовательские данные, прикрепленные к записи.

• См. также: Поля метаданных

СОВЕТ

Если вы хотите использовать функциональный компонент, убедитесь, что добавили к нему displayName.

Например:

const HomeView = () => h('div', 'HomePage')
// in TypeScript, you will need to use the FunctionalComponent type
HomeView.displayName = 'HomeView'
const routes = [{ path: '/', component: HomeView }]

RouteRecordNormalized

Нормализованная версия Записи маршрута

aliasOf

• Тип: RouteRecordNormalized | undefined

• Подробности:

  Определяет, является ли эта запись псевдонимом другой записи. Это свойство undefined , если запись является исходной.

beforeEnter

• Тип: NavigationGuard

• Подробности:

  Стража навигации, применяемая при входе в эту запись откуда-то ещё.

• См. также: Стражи навигации

children

• Тип: Массив нормализованных записей маршрутов

• Подробности:

  Дочерние записи маршрутов маршрута на момент его добавления. Пустой массив, если их нет. Обратите внимание, что этот массив не обновляется при вызовах addRoute() и removeRoute().

components

• Тип: Record<string, Component>

• Подробности:

  Словарь именованных представлений. Если нет, содержит объект с ключом default.

meta

• Тип: RouteMeta

• Подробности:

  Произвольные данные, прикрепленные к записи.

• См. также: Поля метаданных

name

• Тип: string | symbol | undefined

• Подробности:

  Имя записи маршрута. undefined если не было указано.

path

• Тип: string

• Подробности:

  Нормализованный путь записи. Включает любые родительские path.

props

• Тип: Record<string, boolean | Function | Record<string, any>>

• Подробности:

  Словарь props параметра для каждого именованного представления. Если нет, он будет содержать только одно свойство под названием default.

redirect

• Тип: RouteLocationRaw

• Подробности:

  Куда перенаправить, если маршрут непосредственно совпадает. Перенаправление происходит до любой стражи навигации и запускает новую навигацию с новым целевым местоположением.

RouteLocationRaw

Локация маршрута на уровне пользователя, которая может передаваться в router.push(), redirect, и возвращаться в Навигационные стражи.

Сырая локация может быть string, например, /users/posva#bio, или объектом:

// these three forms are equivalent
router.push('/users/posva#bio')
router.push({ path: '/users/posva', hash: '#bio' })
router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })
// only change the hash
router.push({ hash: '#bio' })
// only change query
router.push({ query: { page: '2' } })
// change one param
router.push({ params: { username: 'jolyne' } })

Обратите внимание, что path должны быть предоставлены в закодированном виде (например, phantom blood становится phantom%20blood), в то время как params, query и hash не должны, они кодируются маршрутизатором.

Сырые локации маршрутов также поддерживают дополнительный параметр replace, чтобы вызвать router.replace() вместо router.push() в навигационных стражах. Обратите внимание, что это также внутренне вызывает router.replace(), даже при вызове router.push():

router.push({ hash: '#bio', replace: true })
// equivalent to
router.replace({ hash: '#bio' })

RouteLocation

Решенная RouteLocationRaw, которая может содержать записи перенаправления. Помимо этого, она имеет те же свойства, что и RouteLocationNormalized.

RouteLocationNormalized

Нормализованная локация маршрута. Не содержит никаких записей перенаправления. В навигационных стражах to и from всегда являются экземплярами этого типа.

fullPath

• Тип: string

• Подробности:

  Закодированный URL, связанный с локацией маршрута. Содержит path, query и hash.

hash

• Тип: string

• Подробности:

  Декодированная секция hash URL. Всегда начинается с #. Пустая строка, если в URL нет hash.

query

• Тип: Record<string, string | string[]>

• Подробности:

  Словарь декодированных параметров запроса, извлеченных из секции search URL.

matched

• Тип: RouteRecordNormalized[]

• Подробности:

  Массив нормализованных записей маршрутов, которые соответствовали заданной локации маршрута.

meta

• Тип: RouteMeta

• Подробности:

  Произвольные данные, присоединенные ко всем соответствующим записям, объединенные (не рекурсивно) от родительской записи к дочерней.

• См. также: Поля метаданных

name

• Тип: string | symbol | undefined | null

• Подробности:

  Имя для записи маршрута. undefined если не было указано.

params

• Тип: Record<string, string | string[]>

• Подробности:

  Словарь декодированных параметров, извлеченных из path.

path

• Тип: string

• Подробности:

  Закодированная секция pathname URL, связанная с локацией маршрута.

redirectedFrom

• Тип: RouteLocation

• Подробности:

  Локация маршрута, которую мы изначально пытались получить доступ, прежде чем попасть на текущую локацию, когда был найден параметр redirect или навигационная стража вызвала next() с локацией маршрута. undefined если перенаправления не было.

NavigationFailure

from

• Тип: RouteLocationNormalized

• Подробности:

  Локация маршрута, с которой мы начинали навигацию.

to

• Тип: RouteLocationNormalized

• Подробности:

  Локация маршрута, к которой мы пытались перейти.

type

• Тип: NavigationFailureType

• Подробности:

  Тип ошибки навигации.

• См. также: Ошибки навигации

NavigationGuard

• Аргументы:

  • RouteLocationNormalized to - Локация маршрута, к которой мы переходим
  • RouteLocationNormalized from - Локация маршрута, откуда мы переходим
  • Function next (Необязательно) - Функция для проверки навигации

• Подробности:

  Функция, которая может быть передана для управления навигацией маршрутизатора. Обратный вызов next может быть опущен, если вы возвращаете значение (или Promise) вместо него, что рекомендуется. Возможные возвращаемые значения (и параметры для next):

  • undefined | void | true: проверяет навигацию
  • false: отменяет навигацию
  • RouteLocationRaw: перенаправляет на другую локацию
  • (vm: ComponentPublicInstance) => any только для beforeRouteEnter: обратный вызов, который выполняется после завершения навигации. Получает экземпляр компонента маршрута как параметр.

• См. также: Навигационные стражи

Внедрение компонентов

Внедренные свойства компонента

Эти свойства внедряются в каждый дочерний компонент при вызове app.use(router).

• this.$router

  Экземпляр маршрутизатора.

• this.$route

  Текущая активная локация маршрута. Это свойство является только для чтения и его свойства неизменяемы, но его можно наблюдать.

Включенные параметры компонента

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

См. В компонентах стражей.