Документация API

Документация API

Перечисления

• NavigationFailureType

Интерфейсы

• HistoryState
• NavigationFailure
• NavigationGuard
• NavigationGuardNext
• NavigationGuardWithThis
• NavigationHookAfter
• RouteLocation
• RouteLocationMatched
• RouteLocationNormalized
• RouteLocationNormalizedLoaded
• RouteLocationOptions
• RouteMeta
• RouteRecordMultipleViews
• RouteRecordMultipleViewsWithChildren
• RouteRecordNormalized
• RouteRecordRedirect
• RouteRecordSingleView
• RouteRecordSingleViewWithChildren
• Router
• RouterHistory
• RouterLinkProps
• RouterOptions
• RouterScrollBehavior
• RouterViewProps
• _RouteRecordBase

Псевдонимы типов

LocationQuery

Ƭ LocationQuery: Record<string, LocationQueryValue | LocationQueryValue[]>

Нормализованный объект query, который присутствует в RouteLocationNormalized

---

LocationQueryRaw

Ƭ LocationQueryRaw: Record<string | number, LocationQueryValueRaw | LocationQueryValueRaw[]>

Loose LocationQuery object that can be passed to functions like Router.push and Router.replace or anywhere when creating a RouteLocationRaw

---

PathParserOptions

Ƭ PathParserOptions: Pick<_PathParserOptions, "end" | "sensitive" | "strict">

---

RouteComponent

Ƭ RouteComponent: Component | DefineComponent

Разрешенный компонент в RouteLocationMatched

---

RouteLocationRaw

Ƭ RouteLocationRaw: string | RouteLocationPathRaw | RouteLocationNamedRaw

User-level route location

---

RouteParams

Ƭ RouteParams: Record<string, RouteParamValue | RouteParamValue[]>

---

RouteParamsRaw

Ƭ RouteParamsRaw: Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>

---

RouteRecord

Ƭ RouteRecord: RouteRecordNormalized

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

---

RouteRecordName

Ƭ RouteRecordName: string | symbol

Возможные значения имени записи маршрута, определяемого пользователем

---

RouteRecordRaw

Ƭ RouteRecordRaw: RouteRecordSingleView | RouteRecordSingleViewWithChildren | RouteRecordMultipleViews | RouteRecordMultipleViewsWithChildren | RouteRecordRedirect

---

UseLinkOptions

Ƭ UseLinkOptions: VueUseOptions<RouterLinkOptions>

Переменные

RouterLink

• Const RouterLink: _RouterLinkI

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

---

RouterView

• Const RouterView: () => { $props: AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps ; $slots: { default?: (__namedParameters: { Component: VNode<RendererNode, RendererElement, { [key: string]: any; }> ; route: RouteLocationNormalizedLoaded }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[] } }

Компонент для отображения текущего маршрута, на котором находится пользователь.

Объявление типа

• new RouterView(): Object

Компонент для отображения текущего маршрута, на котором находится пользователь.

Returns

Object

Name	Type
$props	AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterViewProps
$slots	{ default?: (__namedParameters: { Component: VNode<RendererNode, RendererElement, { [key: string]: any; }> ; route: RouteLocationNormalizedLoaded }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[] }
$slots.default?	(__namedParameters: { Component: VNode<RendererNode, RendererElement, { [key: string]: any; }> ; route: RouteLocationNormalizedLoaded }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]

---

START_LOCATION

• Const START_LOCATION: RouteLocationNormalizedLoaded

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

Пример

import { START_LOCATION } from 'vue-router'

router.beforeEach((to, from) => {
  if (from === START_LOCATION) {
    // начальная навигация
  }
})

Функции

createMemoryHistory

▸ createMemoryHistory(base?): RouterHistory

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

Параметры

Название	Тип	Значение по умолчанию	Описание
base	string	''	Базовый путь, который добавляется ко всем URL. По умолчанию равен '/'

Возвращает

RouterHistory

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

---

createRouter

▸ createRouter(options): Router

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

Параметры

Название	Тип	Описание
options	RouterOptions	RouterOptions

Возвращает

Router

---

createWebHashHistory

▸ createWebHashHistory(base?): RouterHistory

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

Параметры

Название	Тип	Описание
base?	string	необязательный базовый адрес. По умолчанию location.pathname + location.search Если в head есть тег <base>, то его значение будет проигнорировано в пользу этого параметра но обратите внимание, что он влияет на все вызовы history.pushState(), то есть если вы используете тег <base>, то его значение href должно соответствовать этому параметру (игнорируя все, что после #).

Возвращает

RouterHistory

Пример

// по адресу https://example.com/folder
createWebHashHistory() // даст итоговый url `https://example.com/folder#`
createWebHashHistory('/folder/') //даст итоговый url `https://example.com/folder/#`
// если `#` указан в base, то он не будет добавлен `createWebHashHistory`
createWebHashHistory('/folder/#/app/') // даст итоговый url `https://example.com/folder/#/app/`
// этого не следует делать, так как это изменяет исходный url и нарушает копирование url
createWebHashHistory('/other-folder/') // даст итоговый url `https://example.com/other-folder/#`

// по адресу file:///usr/etc/folder/index.html
// для местоположений, не имеющих `host`, base игнорируется
createWebHashHistory('/iAmIgnored') //даст итоговый url `file:///usr/etc/folder/index.html#`

---

createWebHistory

▸ createWebHistory(base?): RouterHistory

Создает историю HTML5. Наиболее распространенная история для одностраничных приложений.

Параметры

Название	Тип
base?	string

Возвращает

RouterHistory

---

isNavigationFailure

▸ isNavigationFailure(error, type?): error is NavigationRedirectError

Проверка, является ли объект NavigationFailure.

Параметры

Название	Тип	Описание
error	any	объект, который проверяется на соответствие NavigationFailure
type?	NAVIGATION_GUARD_REDIRECT	опциональный тип для проверки

Возвращает

является ли ошибка NavigationRedirectError

Пример

import { isNavigationFailure, NavigationFailureType } from 'vue-router'

router.afterEach((to, from, failure) => {
  // Любые сбои в навигации
  if (isNavigationFailure(failure)) {
    // ...
  }
  // Только дублированные переходы
  if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
    // ...
  }
  // Прерванные или отмененные переходы
  if (isNavigationFailure(failure, NavigationFailureType.aborted | NavigationFailureType.canceled)) {
    // ...
  }
})

▸ isNavigationFailure(error, type?): является ли ошибка NavigationFailure

Параметры

Название	Тип
error	any
type?	ErrorTypes | NavigationFailureType

Возвращает

является ли ошибка NavigationFailure

---

loadRouteLocation

▸ loadRouteLocation(route): Promise<RouteLocationNormalizedLoaded>

Обеспечивает загрузку маршрута, чтобы его можно было передать в качестве o входного параметра в <RouterView>.

Параметры

Название	Тип	Описание
route	RouteLocationNormalized	resolved route to load

Возвращает

Promise<RouteLocationNormalizedLoaded>

---

onBeforeRouteLeave

▸ onBeforeRouteLeave(leaveGuard): void

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

Параметры

Название	Тип	Описание
leaveGuard	NavigationGuard	NavigationGuard

Возвращает

void

---

onBeforeRouteUpdate

▸ onBeforeRouteUpdate(updateGuard): void

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

Параметры

Название	Тип	Описание
updateGuard	NavigationGuard	NavigationGuard

Возвращает

void

---

useLink

▸ useLink(props): Object

Параметры

Название	Тип
props	VueUseOptions<RouterLinkOptions>

Возвращает

Object

Название	Тип
href	ComputedRef<string>
isActive	ComputedRef<boolean>
isExactActive	ComputedRef<boolean>
navigate	(e: MouseEvent) => Promise<void | NavigationFailure>
route	ComputedRef<RouteLocation & { href: string }>

---

useRoute

▸ useRoute(): RouteLocationNormalizedLoaded

Возвращает описание текущее маршрута. Эквивалентно использованию $route внутри шаблонов.

Возвращает

RouteLocationNormalizedLoaded

---

useRouter

▸ useRouter(): Router

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

Возвращает

Router