Skip to content

Commit 7f95f86

Browse files
committed
docs(api): add missing functions
1 parent 8669c49 commit 7f95f86

File tree

5 files changed

+188
-172
lines changed

5 files changed

+188
-172
lines changed

docs/api/index.md

Lines changed: 186 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Setting `replace` prop will call `router.replace()` instead of `router.push()` w
5454
### active-class
5555

5656
- type: `string`
57-
- default: `"router-link-active"` (or global [`routerLinkActiveClass`](#TODO))
57+
- default: `"router-link-active"` (or global [`linkActiveClass`](#linkactiveclass))
5858

5959
Class to apply on the rendered `a` when the link is active.
6060

@@ -81,15 +81,17 @@ Whether `<router-link>` should not wrap its content in an `<a>` element. Useful
8181
### exact-active-class
8282

8383
- type: `string`
84-
- default: `"router-link-exact-active"` (or global [`routerLinkExactActiveClass`](#TODO))
84+
- default: `"router-link-exact-active"` (or global [`linkExactActiveClass`](#linkexactactiveclass))
8585

8686
Class to apply when the link is exact active.
8787

8888
## `<router-link>`'s `v-slot`
8989

9090
`<router-link>` 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.
9191

92-
\*\*Remember to pass the `custom` option to `<router-link>` to prevent it from wrapping its content inside of an `<a>` element.
92+
:::tip
93+
Remember to pass the `custom` option to `<router-link>` to prevent it from wrapping its content inside of an `<a>` element.
94+
:::
9395

9496
```html
9597
<router-link
@@ -116,6 +118,7 @@ Sometimes we may want the active class to be applied to an outer element rather
116118
```html
117119
<router-link
118120
to="/foo"
121+
custom
119122
v-slot="{ href, route, navigate, isActive, isExactActive }"
120123
>
121124
<li
@@ -145,7 +148,7 @@ When a `<router-view>` has a `name`, it will render the component with the corre
145148

146149
## createRouter
147150

148-
Creates a Router instance that can be used by a Vue app.
151+
Creates a Router instance that can be used by a Vue app. Check the [RouterOptions](#routeroptions) for a list of all the properties that can be passed.
149152

150153
**Signature:**
151154

@@ -155,9 +158,113 @@ export declare function createRouter(options: RouterOptions): Router
155158

156159
### Parameters
157160

158-
| Parameter | Type | Description |
159-
| --------- | ------------------------------------------------------- | -------------------------------- |
160-
| options | [`RouterOptions`](./vue-router-interface#routeroptions) | Options to initialize the router |
161+
| Parameter | Type | Description |
162+
| --------- | ------------------------------- | -------------------------------- |
163+
| options | [RouterOptions](#routeroptions) | Options to initialize the router |
164+
165+
## RouterOptions
166+
167+
### history
168+
169+
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.
170+
171+
**Signature:**
172+
173+
```typescript
174+
history: RouterHistory
175+
```
176+
177+
#### Examples
178+
179+
```js
180+
createRouter({
181+
history: createWebHistory(),
182+
// other options...
183+
})
184+
```
185+
186+
### linkActiveClass
187+
188+
Default class applied to active [RouterLink](#router-link-props). If none is provided, `router-link-active` will be applied.
189+
190+
**Signature:**
191+
192+
```typescript
193+
linkActiveClass?: string;
194+
```
195+
196+
### linkExactActiveClass
197+
198+
Default class applied to exact active [RouterLink](#router-link-props). If none is provided, `router-link-exact-active` will be applied.
199+
200+
**Signature:**
201+
202+
```typescript
203+
linkExactActiveClass?: string;
204+
```
205+
206+
### parseQuery
207+
208+
Custom implementation to parse a query. See its counterpart, [stringifyQuery](#stringifyquery).
209+
210+
**Signature:**
211+
212+
```typescript
213+
parseQuery?: typeof originalParseQuery;
214+
```
215+
216+
#### Examples
217+
218+
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`:
219+
220+
```js
221+
import qs from 'qs'
222+
223+
createRouter({
224+
// other options...
225+
parse: qs.parse,
226+
stringifyQuery: qs.stringify,
227+
})
228+
```
229+
230+
### routes
231+
232+
Initial list of routes that should be added to the router.
233+
234+
**Signature:**
235+
236+
```typescript
237+
routes: RouteRecordRaw[];
238+
```
239+
240+
### scrollBehavior
241+
242+
Function to control scrolling when navigating between pages. Can return a Promise to delay scrolling. Check .
243+
244+
**Signature:**
245+
246+
```typescript
247+
scrollBehavior?: ScrollBehavior;
248+
```
249+
250+
#### Examples
251+
252+
```js
253+
function scrollBehavior(to, from, savedPosition) {
254+
// `to` and `from` are both route locations
255+
// `savedPosition` can be null if there isn't one
256+
}
257+
```
258+
259+
### stringifyQuery
260+
261+
Custom implementation to stringify a query object. Should not prepend a leading `?`. [parseQuery](#parsequery) counterpart to handle query parsing.
262+
263+
**Signature:**
264+
265+
```typescript
266+
stringifyQuery?: typeof originalStringifyQuery;
267+
```
161268

162269
## createWebHistory
163270

@@ -216,7 +323,7 @@ createWebHashHistory('/iAmIgnored') // gives a url of `file:///usr/etc/folder/in
216323

217324
## createMemoryHistory
218325

219-
Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special ___location that is nowhere. It's up to the user to replace that ___location with the starter ___location.
326+
Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special ___location that is nowhere. It's up to the user to replace that ___location with the starter ___location by either calling `router.push` or `router.replace`.
220327

221328
**Signature:**
222329

@@ -226,10 +333,78 @@ export declare function createMemoryHistory(base?: string): RouterHistory
226333

227334
### Parameters
228335

229-
| Parameter | Type | Description |
230-
| --------- | ------ | ----------------------------------------- |
231-
| base | string | Base applied to all urls, defaults to '/' |
336+
| Parameter | Type | Description |
337+
| --------- | -------- | ----------------------------------------- |
338+
| base | `string` | Base applied to all urls, defaults to '/' |
232339

233340
### Returns
234341

235342
a history object that can be passed to the router constructor
343+
344+
## NavigationFailureType
345+
346+
Enumeration with all possible types for navigation failures. Can be passed to [isNavigationFailure](#isnavigationfailure) to check for specific failures. **Never use any of the numerical values**, always use the variables like `NavigationFailureType.aborted`.
347+
348+
**Signature:**
349+
350+
```typescript
351+
export declare enum NavigationFailureType
352+
```
353+
354+
### Members
355+
356+
| Member | Value | Description |
357+
| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
358+
| aborted | 4 | An aborted navigation is a navigation that failed because a navigation guard returned `false` or called `next(false)` |
359+
| cancelled | 8 | A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished). |
360+
| duplicated | 16 | A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same ___location. |
361+
362+
## Composition API
363+
364+
### onBeforeRouteLeave
365+
366+
Add a navigation guard that triggers whenever the component for the current ___location is about to be left. Similar to but can be used in any component. The guard is removed when the component is unmounted.
367+
368+
**Signature:**
369+
370+
```typescript
371+
export declare function onBeforeRouteLeave(leaveGuard: NavigationGuard): void
372+
```
373+
374+
#### Parameters
375+
376+
| Parameter | Type | Description |
377+
| ---------- | --------------- | ----------------------------------- |
378+
| leaveGuard | NavigationGuard | [NavigationGuard](#navigationguard) |
379+
380+
### onBeforeRouteUpdate
381+
382+
Add a navigation guard that triggers whenever the current ___location is about to be updated. Similar to but can be used in any component. The guard is removed when the component is unmounted.
383+
384+
**Signature:**
385+
386+
```typescript
387+
export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void
388+
```
389+
390+
#### Parameters
391+
392+
| Parameter | Type | Description |
393+
| ----------- | --------------- | ----------------------------------- |
394+
| updateGuard | NavigationGuard | [NavigationGuard](#navigationguard) |
395+
396+
### useLink
397+
398+
TODO:
399+
400+
### useRoute
401+
402+
TODO:
403+
404+
### useRouter
405+
406+
TODO:
407+
408+
## TypeScript
409+
410+
Here are some of the interfaces and types used by Vue Router. The documentation references them to give you an idea of the existing properties in objects.

docs/api/vue-router-enum.md

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,3 @@ sidebar: auto
33
---
44

55
# Enum
6-
7-
## NavigationFailureType
8-
9-
Enumeration with all possible types for navigation failures. Can be passed to to check for specific failures.
10-
11-
**Signature:**
12-
13-
```typescript
14-
export declare enum NavigationFailureType
15-
```
16-
17-
### Members
18-
19-
| Member | Value | Description |
20-
| ---------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
21-
| aborted | 4 | An aborted navigation is a navigation that failed because a navigation guard returned `false` or called `next(false)` |
22-
| cancelled | 8 | A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished). |
23-
| duplicated | 16 | A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same ___location. |

docs/api/vue-router-function.md

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,6 @@
66

77
## isNavigationFailure
88

9-
## onBeforeRouteLeave
10-
11-
Add a navigation guard that triggers whenever the component for the current ___location is about to be left. Similar to but can be used in any component. The guard is removed when the component is unmounted.
12-
13-
**Signature:**
14-
15-
```typescript
16-
export declare function onBeforeRouteLeave(leaveGuard: NavigationGuard): void
17-
```
18-
19-
### Parameters
20-
21-
| Parameter | Type | Description |
22-
| ---------- | --------------- | --------------------------------------------------------- |
23-
| leaveGuard | NavigationGuard | [NavigationGuard](./vue-router-interface#navigationguard) |
24-
25-
## onBeforeRouteUpdate
26-
27-
Add a navigation guard that triggers whenever the current ___location is about to be updated. Similar to but can be used in any component. The guard is removed when the component is unmounted.
28-
29-
**Signature:**
30-
31-
```typescript
32-
export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void
33-
```
34-
35-
### Parameters
36-
37-
| Parameter | Type | Description |
38-
| ----------- | --------------- | --------------------------------------------------------- |
39-
| updateGuard | NavigationGuard | [NavigationGuard](./vue-router-interface#navigationguard) |
40-
419
## parseQuery
4210

4311
Transforms a queryString into a [LocationQuery](./vue-router-typealias#locationquery) object. Accept both, a version with the leading `?` and without Should work as URLSearchParams

0 commit comments

Comments
 (0)