From: Eduardo San Martin Morote Date: Tue, 8 Sep 2020 14:10:39 +0000 (+0200) Subject: docs(api): add router-link X-Git-Tag: v4.0.0-beta.10~50 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=242a6aaba716def4985fa7fd3eebaf546c55a807;p=thirdparty%2Fvuejs%2Frouter.git docs(api): add router-link --- diff --git a/docs/api/index.md b/docs/api/index.md index 8d136ed1..e25332d4 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -1,3 +1,7 @@ +--- +sidebar: auto +--- + # API Reference - [Components](./vue-router-variable.md) @@ -5,3 +9,123 @@ - [Functions](./vue-router-function.md) - [Interfaces](./vue-router-interface.md) - [Types](./vue-router-typealias.md) + +## `` props + +### to + +- type: [`RouteLocationRaw`](#routelocationraw) +- required + +Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to `router.push()` internally, so the value can be either a string or a [route location object](#routelocationraw). + +```html + +Home + +Home + + +Home + + +Home + + +User + + + + Register + +``` + +### replace + +- type: `boolean` +- default: `false` + +Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. + +```html + +``` + +### active-class + +- type: `string` +- default: `'router-link-active'` (or global [`routerLinkActiveClass`](#TODO)) + +Class to apply on the rendered `a` when the link is active. + +### aria-current-value + +- type: `'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'` (`string`) +- default: `'page'` + +Value passed to the attribute `aria-current` when the link is exactly active. + +### custom + +- type: `boolean` +- default: `false` + +Whether `` should not wrap its content in an `` element. Useful when using `v-slot` to create a custom RouterLink. + +```html + + {{ route.fullPath }} + +``` + +### exact-active-class + +- type: `string` +- default: `'router-link-exact-active'` (or global [`routerLinkExactActiveClass`](#TODO)) + +Class to apply when the link is exact active. + +## ``'s `v-slot` + +`` exposes a low level customization through a [scoped slot](https://v3.vuejs.org/guide/component-slots.html#scoped-slots). This is a more advanced API that primarily targets library authors but can come in handy for developers as well, to build a custom component like a _NavLink_ or other. + +\*\*Remember to pass the `custom` option to `` to prevent it from wrapping its content inside of an `` element. + +```html + + + {{ route.fullPath }} + + +``` + +- `href`: resolved url. This would be the `href` attribute of an `` element. It contains the `base` if any was provided. +- `route`: resolved normalized location. +- `navigate`: function to trigger the navigation. **It will automatically prevent events when necessary**, the same way `router-link` does, e.g. `ctrl` or `cmd` + click will still be ignored by `navigate`. +- `isActive`: `true` if the [active class](#active-class) should be applied. Allows to apply an arbitrary class. +- `isExactActive`: `true` if the [exact active class](#exact-active-class) should be applied. Allows to apply an arbitrary class. + +### Example: Applying Active Class to Outer Element + +Sometimes we may want the active class to be applied to an outer element rather than the `` element itself, in that case, you can wrap that element inside a `router-link` and use the `v-slot` properties to create your link: + +```html + +
  • + {{ route.fullPath }} +
    • +     +``` + +:::tip +If you add a `target="_blank"` to your `a` element, you must omit the `@click="navigate"` handler. +::: diff --git a/docs/api/vue-router-enum.md b/docs/api/vue-router-enum.md index 683c72fe..6c41db3d 100644 --- a/docs/api/vue-router-enum.md +++ b/docs/api/vue-router-enum.md @@ -1,19 +1,23 @@ +--- +sidebar: auto +--- + # Enum ## NavigationFailureType -Enumeration with all possible types for navigation failures. Can be passed to to check for specific failures. +Enumeration with all possible types for navigation failures. Can be passed to to check for specific failures. **Signature:** + ```typescript -export declare enum NavigationFailureType +export declare enum NavigationFailureType ``` ### Members -| Member | Value| Description | -| --- | --- | --- | -| aborted | 4 | An aborted navigation is a navigation that failed because a navigation guard returned `false` or called `next(false)` | -| cancelled | 8 | A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished). | -| duplicated | 16 | A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same location. | - +| Member | Value | Description | +| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- | +| aborted | 4 | An aborted navigation is a navigation that failed because a navigation guard returned `false` or called `next(false)` | +| cancelled | 8 | A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished). | +| duplicated | 16 | A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same location. | diff --git a/docs/api/vue-router-interface.md b/docs/api/vue-router-interface.md index 1b5a9b98..6b869557 100644 --- a/docs/api/vue-router-interface.md +++ b/docs/api/vue-router-interface.md @@ -5,14 +5,13 @@ Extended Error that contains extra information regarding a failed navigation. **Signature:** + ```typescript -export interface NavigationFailure extends RouterErrorBase +export interface NavigationFailure extends RouterErrorBase ``` - ### Methods - ### Properties #### from @@ -20,8 +19,9 @@ export interface NavigationFailure extends RouterErrorBase Route location we were navigating from **Signature:** + ```typescript -from: RouteLocationNormalized; +from: RouteLocationNormalized ``` #### to @@ -29,8 +29,9 @@ from: RouteLocationNormalized; Route location we were navigating to **Signature:** + ```typescript -to: RouteLocationNormalized; +to: RouteLocationNormalized ``` #### type @@ -38,58 +39,51 @@ to: RouteLocationNormalized; Type of the navigation. One of [NavigationFailureType](./vue-router-enum#navigationfailuretype) **Signature:** + ```typescript -type: ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_DUPLICATED; +type: ErrorTypes.NAVIGATION_CANCELLED | + ErrorTypes.NAVIGATION_ABORTED | + ErrorTypes.NAVIGATION_DUPLICATED ``` - ## NavigationGuard Navigation guard. See [Navigation Guards](/guide/advanced/navigation-guards.md). **Signature:** + ```typescript -export interface NavigationGuard +export interface NavigationGuard ``` - ### Methods - ### Properties - ## NavigationGuardNext - ### Methods - ### Properties - ## NavigationHookAfter - ### Methods - ### Properties - ## RouteLocation [RouteLocationRaw](./vue-router-typealias#routelocationraw) resolved using the matcher **Signature:** + ```typescript -export interface RouteLocation extends _RouteLocationBase +export interface RouteLocation extends _RouteLocationBase ``` - ### Methods - ### Properties #### matched @@ -97,35 +91,31 @@ export interface RouteLocation extends _RouteLocationBase Array of [RouteRecord](./vue-router-typealias#routerecord) containing components as they were passed when adding records. It can also contain redirect records. This can't be used directly **Signature:** + ```typescript matched: RouteRecord[]; ``` - ## RouteLocationMatched - ### Methods - ### Properties #### components - ## RouteLocationNormalized Similar to [RouteLocation](./vue-router-interface#routelocation) but its [matched](./vue-router-interface#routelocationnormalized.matched) cannot contain redirect records **Signature:** + ```typescript -export interface RouteLocationNormalized extends _RouteLocationBase +export interface RouteLocationNormalized extends _RouteLocationBase ``` - ### Methods - ### Properties #### matched @@ -133,24 +123,23 @@ export interface RouteLocationNormalized extends _RouteLocationBase Array of [RouteRecordNormalized](./vue-router-interface#routerecordnormalized) **Signature:** + ```typescript matched: RouteRecordNormalized[]; ``` - ## RouteLocationNormalizedLoaded [RouteLocationRaw](./vue-router-typealias#routelocationraw) with **Signature:** + ```typescript -export interface RouteLocationNormalizedLoaded extends _RouteLocationBase +export interface RouteLocationNormalizedLoaded extends _RouteLocationBase ``` - ### Methods - ### Properties #### matched @@ -158,17 +147,15 @@ export interface RouteLocationNormalizedLoaded extends _RouteLocationBase Array of [RouteLocationMatched](./vue-router-interface#routelocationmatched) containing only plain components (any lazy-loaded components have been loaded and were replaced inside of the `components` object) so it can be directly used to display routes. It cannot contain redirect records either **Signature:** + ```typescript matched: RouteLocationMatched[]; ``` - ## RouteLocationOptions - ### Methods - ### Properties #### force @@ -176,6 +163,7 @@ matched: RouteLocationMatched[]; Triggers the navigation even if the location is the same as the current one **Signature:** + ```typescript force?: boolean; ``` @@ -185,6 +173,7 @@ force?: boolean; Replace the entry in the history instead of pushing a new entry **Signature:** + ```typescript replace?: boolean; ``` @@ -194,23 +183,19 @@ replace?: boolean; State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info at TODO: link mdn **Signature:** + ```typescript state?: HistoryState; ``` - ## RouteMeta - ### Methods - ### Properties - ## Router - ### Methods #### addRoute @@ -218,50 +203,52 @@ state?: HistoryState; Add a new [Route Record](./vue-router-typealias#routerecordraw) as the child of an existing route. **Signature:** + ```typescript addRoute(parentName: RouteRecordName, route: RouteRecordRaw): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | +| Parameter | Type | Description | +| ---------- | --------------- | ------------------------------------------------------- | | parentName | RouteRecordName | Parent Route Record where `route` should be appended at | -| route | RouteRecordRaw | Route Record to add | +| route | RouteRecordRaw | Route Record to add | #### addRoute Add a new [route record](./vue-router-typealias#routerecordraw) to the router. **Signature:** + ```typescript addRoute(route: RouteRecordRaw): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| route | RouteRecordRaw | Route Record to add | +| Parameter | Type | Description | +| --------- | -------------- | ------------------- | +| route | RouteRecordRaw | Route Record to add | #### afterEach Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook. **Signature:** + ```typescript afterEach(guard: NavigationHookAfter): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| guard | NavigationHookAfter | navigation hook to add | +| Parameter | Type | Description | +| --------- | ------------------- | ---------------------- | +| guard | NavigationHookAfter | navigation hook to add | ### Examples - ```js router.afterEach((to, from, failure) => { if (isNavigationFailure(failure)) { @@ -270,210 +257,223 @@ router.afterEach((to, from, failure) => { }) ``` - #### back Go back in history if possible by calling `history.back()`. Equivalent to `router.go(-1)`. Returns a Promise. See the limitations at [go](./vue-router-interface#router.go). **Signature:** + ```typescript back(): Promise; ``` -*Parameters* +_Parameters_ | Parameter | Type | Description | -| --- | --- | --- | +| --------- | ---- | ----------- | + #### beforeEach Add a navigation guard that executes before any navigation. Returns a function that removes the registered guard. **Signature:** + ```typescript beforeEach(guard: NavigationGuardWithThis): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| guard | NavigationGuardWithThis<undefined> | navigation guard to add | +| Parameter | Type | Description | +| --------- | ---------------------------------------- | ----------------------- | +| guard | NavigationGuardWithThis<undefined> | navigation guard to add | #### beforeResolve Add a navigation guard that executes before navigation is about to be resolved. At this state all component have been fetched and other navigation guards have been successful. Returns a function that removes the registered guard. **Signature:** + ```typescript beforeResolve(guard: NavigationGuardWithThis): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| guard | NavigationGuardWithThis<undefined> | navigation guard to add | +| Parameter | Type | Description | +| --------- | ---------------------------------------- | ----------------------- | +| guard | NavigationGuardWithThis<undefined> | navigation guard to add | ### Examples - ```js router.beforeEach(to => { if (to.meta.requiresAuth && !isAuthenticated) return false }) ``` - #### forward Go forward in history if possible by calling `history.forward()`. Equivalent to `router.go(1)`. Returns a Promise. See the limitations at [go](./vue-router-interface#router.go). **Signature:** + ```typescript forward(): Promise; ``` -*Parameters* +_Parameters_ | Parameter | Type | Description | -| --- | --- | --- | +| --------- | ---- | ----------- | + #### getRoutes Get a full list of all the [route records](./vue-router-typealias#routerecord). **Signature:** + ```typescript getRoutes(): RouteRecord[]; ``` -*Parameters* +_Parameters_ | Parameter | Type | Description | -| --- | --- | --- | +| --------- | ---- | ----------- | + #### go Allows you to move forward or backward through the history. Returns a Promise that resolves when the navigation finishes. If it wasn't possible to go back, the promise never resolves or rejects **Signature:** + ```typescript go(delta: number): Promise; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| delta | number | The position in the history to which you want to move, relative to the current page | +| Parameter | Type | Description | +| --------- | ------ | ----------------------------------------------------------------------------------- | +| delta | number | The position in the history to which you want to move, relative to the current page | #### hasRoute Checks if a route with a given name exists **Signature:** + ```typescript hasRoute(name: RouteRecordName): boolean; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| name | RouteRecordName | Name of the route to check | +| Parameter | Type | Description | +| --------- | --------------- | -------------------------- | +| name | RouteRecordName | Name of the route to check | #### isReady Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. If the initial navigation already happened, the promise resolves immediately.This is useful in server-side rendering to ensure consistent output on both the server and the client. Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL. **Signature:** + ```typescript isReady(): Promise; ``` -*Parameters* +_Parameters_ | Parameter | Type | Description | -| --- | --- | --- | +| --------- | ---- | ----------- | + #### onError Adds an error handler that is called every time a non caught error happens during navigation. This includes errors thrown synchronously and asynchronously, errors returned or passed to `next` in any navigation guard, and errors occurred when trying to resolve an async component that is required to render a route. **Signature:** + ```typescript onError(handler: ErrorHandler): () => void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| handler | ErrorHandler | error handler to register | +| Parameter | Type | Description | +| --------- | ------------ | ------------------------- | +| handler | ErrorHandler | error handler to register | #### push Programmatically navigate to a new URL by pushing an entry in the history stack. **Signature:** + ```typescript push(to: RouteLocationRaw): Promise; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| to | RouteLocationRaw | Route location to navigate to | +| Parameter | Type | Description | +| --------- | ---------------- | ----------------------------- | +| to | RouteLocationRaw | Route location to navigate to | #### removeRoute Remove an existing route by its name. **Signature:** + ```typescript removeRoute(name: RouteRecordName): void; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| name | RouteRecordName | Name of the route to remove | +| Parameter | Type | Description | +| --------- | --------------- | --------------------------- | +| name | RouteRecordName | Name of the route to remove | #### replace Programmatically navigate to a new URL by replacing the current entry in the history stack. **Signature:** + ```typescript replace(to: RouteLocationRaw): Promise; ``` -*Parameters* +_Parameters_ -| Parameter | Type | Description | -| --- | --- | --- | -| to | RouteLocationRaw | Route location to navigate to | +| Parameter | Type | Description | +| --------- | ---------------- | ----------------------------- | +| to | RouteLocationRaw | Route location to navigate to | #### resolve Returns the [normalized version](./vue-router-interface#routelocation) of a [route location](./vue-router-typealias#routelocationraw). Also includes an `href` property that includes any existing `base`. **Signature:** + ```typescript resolve(to: RouteLocationRaw): RouteLocation & { href: string; }; ``` -*Parameters* - -| Parameter | Type | Description | -| --- | --- | --- | -| to | RouteLocationRaw | Raw route location to resolve | +_Parameters_ +| Parameter | Type | Description | +| --------- | ---------------- | ----------------------------- | +| to | RouteLocationRaw | Raw route location to resolve | ### Properties @@ -482,6 +482,7 @@ resolve(to: RouteLocationRaw): RouteLocation & { Current [RouteLocationNormalized](./vue-router-interface#routelocationnormalized) **Signature:** + ```typescript readonly currentRoute: Ref; ``` @@ -491,24 +492,23 @@ readonly currentRoute: Ref; Original options object passed to create the Router **Signature:** + ```typescript readonly options: RouterOptions; ``` - ## RouteRecordNormalized Normalized version of a [Route Record](./vue-router-typealias#routerecord) **Signature:** + ```typescript -export interface RouteRecordNormalized +export interface RouteRecordNormalized ``` - ### Methods - ### Properties #### aliasOf @@ -516,35 +516,33 @@ export interface RouteRecordNormalized Defines if this record is the alias of another one. This property is `undefined` if the record is the original one. **Signature:** + ```typescript -aliasOf: RouteRecordNormalized | undefined; +aliasOf: RouteRecordNormalized | undefined ``` #### beforeEnter - - **Signature:** + ```typescript -beforeEnter: RouteRecordMultipleViews['beforeEnter']; +beforeEnter: RouteRecordMultipleViews['beforeEnter'] ``` #### children - - **Signature:** + ```typescript children: Exclude<_RouteRecordBase['children'], void>; ``` #### components - - **Signature:** + ```typescript -components: RouteRecordMultipleViews['components']; +components: RouteRecordMultipleViews['components'] ``` #### instances @@ -552,6 +550,7 @@ components: RouteRecordMultipleViews['components']; Mounted route component instances Having the instances on the record mean beforeRouteUpdate and beforeRouteLeave guards can only be invoked with the latest mounted app instance if there are multiple application instances rendering the same view, basically duplicating the content on the page, which shouldn't happen in practice. It will work if multiple apps are rendering different named views. **Signature:** + ```typescript instances: Record; ``` @@ -561,6 +560,7 @@ instances: Record; Arbitrary data attached to the record. **Signature:** + ```typescript meta: Exclude<_RouteRecordBase['meta'], void>; ``` @@ -570,8 +570,9 @@ meta: Exclude<_RouteRecordBase['meta'], void>; Name for the route record. **Signature:** + ```typescript -name: _RouteRecordBase['name']; +name: _RouteRecordBase['name'] ``` #### path @@ -579,15 +580,15 @@ name: _RouteRecordBase['name']; Path of the record. Should start with `/` unless the record is the child of another record. **Signature:** + ```typescript -path: _RouteRecordBase['path']; +path: _RouteRecordBase['path'] ``` #### props - - **Signature:** + ```typescript props: Record; ``` @@ -597,62 +598,15 @@ props: Record; Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location. **Signature:** -```typescript -redirect: _RouteRecordBase['redirect'] | undefined; -``` - - -## RouterLinkProps - - -### Methods - - -### Properties - -#### activeClass - -Class to apply when the link is active - -**Signature:** -```typescript -activeClass?: string; -``` - -#### ariaCurrentValue - -Value passed to the attribute `aria-current` when the link is exact active. Defaults to "page" - -**Signature:** -```typescript -ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'; -``` - -#### custom - -Whether RouterLink should not wrap its content in an `a` tag. Useful when using `v-slot` to create a custom RouterLink - -**Signature:** -```typescript -custom?: boolean; -``` - -#### exactActiveClass - -Class to apply when the link is exact active -**Signature:** ```typescript -exactActiveClass?: string; +redirect: _RouteRecordBase['redirect'] | undefined ``` - ## RouterOptions - ### Methods - ### Properties #### history @@ -660,13 +614,13 @@ exactActiveClass?: string; History implementation used by the router. Most web applications should use `createWebHistory` but it requires the server to be properly configured. You can also use a _hash_ based history with `createWebHashHistory` that does not require any configuration on the server but isn't handled at all by search engines and does poorly on SEO. **Signature:** + ```typescript -history: RouterHistory; +history: RouterHistory ``` ### Examples - ```js createRouter({ history: createWebHistory(), @@ -674,12 +628,12 @@ createRouter({ }) ``` - #### linkActiveClass Default class applied to active [RouterLink](./vue-router-variable#routerlink). If none is provided, `router-link-active` will be applied. **Signature:** + ```typescript linkActiveClass?: string; ``` @@ -689,6 +643,7 @@ linkActiveClass?: string; Default class applied to exact active [RouterLink](./vue-router-variable#routerlink). If none is provided, `router-link-exact-active` will be applied. **Signature:** + ```typescript linkExactActiveClass?: string; ``` @@ -698,6 +653,7 @@ linkExactActiveClass?: string; Custom implementation to parse a query. See its counterpart, [stringifyQuery](./vue-router-interface#routeroptions.stringifyquery). **Signature:** + ```typescript parseQuery?: typeof originalParseQuery; ``` @@ -705,6 +661,7 @@ parseQuery?: typeof originalParseQuery; ### Examples Let's say you want to use the package [qs](https://github.com/ljharb/qs) to parse queries, you can provide both `parseQuery` and `stringifyQuery`: + ```js import qs from 'qs' @@ -715,12 +672,12 @@ createRouter({ }) ``` - #### routes Initial list of routes that should be added to the router. **Signature:** + ```typescript routes: RouteRecordRaw[]; ``` @@ -730,13 +687,13 @@ routes: RouteRecordRaw[]; Function to control scrolling when navigating between pages. Can return a Promise to delay scrolling. Check . **Signature:** + ```typescript scrollBehavior?: ScrollBehavior; ``` ### Examples - ```js function scrollBehavior(to, from, savedPosition) { // `to` and `from` are both route locations @@ -744,36 +701,28 @@ function scrollBehavior(to, from, savedPosition) { } ``` - #### stringifyQuery Custom implementation to stringify a query object. Should not prepend a leading `?`. [parseQuery](./vue-router-interface#routeroptions.parsequery) counterpart to handle query parsing. **Signature:** + ```typescript stringifyQuery?: typeof originalStringifyQuery; ``` - ## RouterViewProps - ### Methods - ### Properties #### name #### route - ## ScrollBehavior_2 - ### Methods - ### Properties - -