API 文档

API 文档 ​

TS 枚举 ​

• NavigationFailureType

TS 接口 ​

• HistoryState
• NavigationFailure
• NavigationGuard
• NavigationGuardNext
• NavigationGuardWithThis
• NavigationHookAfter
• RouteLocation
• RouteLocationMatched
• RouteLocationNormalized
• RouteLocationNormalizedLoaded
• RouteLocationOptions
• RouteMeta
• RouteRecordNormalized
• Router
• RouterHistory
• RouterLinkProps
• RouterOptions
• RouterScrollBehavior
• RouterViewProps

TS 类型别名 ​

LocationQuery ​

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

出现在 RouteLocationNormalized 中的规范化查询对象。

LocationQueryRaw ​

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

松散的 LocationQuery 对象，可以被传递给诸如 push 、 replace 或任何创建 RouteLocationRaw 的函数。

PathParserOptions ​

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

RouteComponent ​

Ƭ RouteComponent : Component | DefineComponent

在 RouteLocationMatched 中允许的组件。

RouteLocationRaw ​

Ƭ RouteLocationRaw : string | RouteLocationPathRaw | RouteLocationNamedRaw

用户级别的路由位置。

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 ()

用于显示用户当前所处路由的组件。

START_LOCATION ​

• Const START_LOCATION : RouteLocationNormalizedLoaded

路由器的初始路由位置。可以在导航守卫中使用来区分初始导航。

示例

import { START_LOCATION } from 'vue-router'
router.beforeEach((to, from) => {
  if (from === START_LOCATION) {
    // 初始导航
})

import { START_LOCATION } from 'vue-router'
router.beforeEach((to, from) => {
  if (from === START_LOCATION) {
    // 初始导航
})

函数 ​

createMemoryHistory ​

▸ createMemoryHistory ( base? ): RouterHistory

创建一个基于内存的历史。该历史的主要目的是为了处理服务端渲染。它从一个不存在的特殊位置开始。用户可以通过调用 router.push 或 router.replace 将该位置替换成起始位置。

参数 ​

返回值 ​

RouterHistory

一个历史对象，可以传递给路由器构造函数。

createRouter ​

▸ createRouter ( options ): Router

创建一个可以被 Vue 应用使用的 Router 实例。

参数 ​

返回值 ​

Router

createWebHashHistory ​

▸ createWebHashHistory ( base? ): RouterHistory

创建一个 hash 模式的历史。在没有主机的 web 应用 (如 file:// ) 或无法通过配置服务器来处理任意 URL 的时候非常有用。

示例

// 基于 https://example.com/folder
createWebHashHistory() // 给出一个 `https://example.com/folder#` 的 URL
createWebHashHistory('/folder/') // 给出一个 `https://example.com/folder/#` 的 URL
// 如果其基础位置提供了 `#`，则不会被 `createWebHashHistory` 添加
createWebHashHistory('/folder/#/app/') // 给出一个 `https://example.com/folder/#/app/` 的 URL
// 你应该避免这样做，因为它改变了原始的 URL 且破坏了复制 URL 的工作
createWebHashHistory('/other-folder/') // 给出一个 `https://example.com/other-folder/#` 的 URL
// 基于 file:///usr/etc/folder/index.html
// 对于没有 `host` 的位置，该 base 会被忽略
createWebHashHistory('/iAmIgnored') // 给出一个 `file:///usr/etc/folder/index.html#` 的 URL

// 基于 https://example.com/folder
createWebHashHistory() // 给出一个 `https://example.com/folder#` 的 URL
createWebHashHistory('/folder/') // 给出一个 `https://example.com/folder/#` 的 URL
// 如果其基础位置提供了 `#`，则不会被 `createWebHashHistory` 添加
createWebHashHistory('/folder/#/app/') // 给出一个 `https://example.com/folder/#/app/` 的 URL
// 你应该避免这样做，因为它改变了原始的 URL 且破坏了复制 URL 的工作
createWebHashHistory('/other-folder/') // 给出一个 `https://example.com/other-folder/#` 的 URL
// 基于 file:///usr/etc/folder/index.html
// 对于没有 `host` 的位置，该 base 会被忽略
createWebHashHistory('/iAmIgnored') // 给出一个 `file:///usr/etc/folder/index.html#` 的 URL

参数 ​

返回值 ​

RouterHistory

createWebHistory ​

▸ createWebHistory ( base? ): RouterHistory

创建一个 HTML5 历史。对于单页应用来说这是最常见的历史。

参数 ​

返回值 ​

RouterHistory

isNavigationFailure ​

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

检查一个对象是否是 NavigationFailure 。

示例

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)) {
    // ...
})

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)) {
    // ...