Skip to content

Commit 195ffc5

Browse files
xiaoxiangmoexiaoxiangmoe
committed
feat: export RouterLink RouterView
1 parent 1e4b9cb commit 195ffc5

File tree

6 files changed

+233
-69
lines changed

6 files changed

+233
-69
lines changed

‎src/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* @flow */
22

3+
import RouterView from './components/view'
4+
import RouterLink from './components/link'
35
import { install } from './install'
46
import { START } from './util/route'
57
import { assert, warn } from './util/warn'
@@ -24,6 +26,8 @@ export default class VueRouter {
2426
static isNavigationFailure: Function
2527
static NavigationFailureType: any
2628
static START_LOCATION: Route
29+
static RouterView: any
30+
static RouterLink: any
2731

2832
app: any
2933
apps: Array<any>
@@ -283,6 +287,8 @@ function createHref (base: string, fullPath: string, mode) {
283287
return base ? cleanPath(base + '/' + path) : path
284288
}
285289

290+
VueRouter.RouterView = RouterView
291+
VueRouter.RouterLink = RouterLink
286292
VueRouter.install = install
287293
VueRouter.version = '__VERSION__'
288294
VueRouter.isNavigationFailure = isNavigationFailure

types/router.d.ts renamed to types/Route.d.ts

Lines changed: 6 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Vue, { ComponentOptions, PluginFunction, AsyncComponent } from 'vue'
1+
import Vue, { Component as VueComponent, AsyncComponent } from 'vue'
22

3-
type Component = ComponentOptions<Vue> | typeof Vue | AsyncComponent
3+
type Component = VueComponent | AsyncComponent
44
type Dictionary<T> = { [key: string]: T }
55
type ErrorHandler = (err: Error) => void
66

@@ -17,69 +17,6 @@ export type NavigationGuard<V extends Vue = Vue> = (
1717
next: NavigationGuardNext<V>
1818
) => any
1919

20-
export declare class VueRouter {
21-
constructor(options?: RouterOptions)
22-
23-
app: Vue
24-
options: RouterOptions
25-
mode: RouterMode
26-
currentRoute: Route
27-
28-
beforeEach(guard: NavigationGuard): Function
29-
beforeResolve(guard: NavigationGuard): Function
30-
afterEach(hook: (to: Route, from: Route) => any): Function
31-
push(location: RawLocation): Promise<Route>
32-
replace(location: RawLocation): Promise<Route>
33-
push(
34-
location: RawLocation,
35-
onComplete?: Function,
36-
onAbort?: ErrorHandler
37-
): void
38-
replace(
39-
location: RawLocation,
40-
onComplete?: Function,
41-
onAbort?: ErrorHandler
42-
): void
43-
go(n: number): void
44-
back(): void
45-
forward(): void
46-
match (raw: RawLocation, current?: Route, redirectedFrom?: Location): Route
47-
getMatchedComponents(to?: RawLocation | Route): Component[]
48-
onReady(cb: Function, errorCb?: ErrorHandler): void
49-
onError(cb: ErrorHandler): void
50-
addRoutes(routes: RouteConfig[]): void
51-
52-
addRoute(parent: string, route: RouteConfig): void
53-
addRoute(route: RouteConfig): void
54-
getRoutes(): RouteRecordPublic[]
55-
56-
resolve(
57-
to: RawLocation,
58-
current?: Route,
59-
append?: boolean
60-
): {
61-
location: Location
62-
route: Route
63-
href: string
64-
// backwards compat
65-
normalizedTo: Location
66-
resolved: Route
67-
}
68-
69-
static install: PluginFunction<never>
70-
static version: string
71-
72-
static isNavigationFailure: (
73-
error: any,
74-
type?: number
75-
) => error is NavigationFailure
76-
static NavigationFailureType: {
77-
[k in keyof typeof NavigationFailureType]: NavigationFailureType
78-
}
79-
80-
static START_LOCATION: Route
81-
}
82-
8320
export enum NavigationFailureType {
8421
redirected = 2,
8522
aborted = 4,
@@ -94,7 +31,10 @@ export interface NavigationFailure extends Error {
9431
}
9532

9633
type Position = { x: number; y: number }
97-
type PositionResult = Position | { selector: string; offset?: Position, behavior?: ScrollBehavior } | void
34+
type PositionResult =
35+
| Position
36+
| { selector: string; offset?: Position; behavior?: ScrollBehavior }
37+
| void
9838

9939
export interface RouterOptions {
10040
routes?: RouteConfig[]
@@ -185,7 +125,6 @@ export interface RouteRecordPublic {
185125
| Dictionary<boolean | Object | RoutePropsFunction>
186126
}
187127

188-
189128
export interface Location {
190129
name?: string
191130
path?: string

‎types/RouterLink.d.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { VNode } from 'vue'
2+
import { NavigationFailure, Route } from './Route'
3+
4+
export interface RouterLinkProps {
5+
/**
6+
* 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 location descriptor object.
7+
*/
8+
to: string | Location
9+
/**
10+
* Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record.
11+
*
12+
* @default false
13+
*/
14+
replace?: boolean
15+
/**
16+
* Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at `/a/b`.
17+
*
18+
* @default false
19+
*/
20+
append?: boolean
21+
/**
22+
* Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to render to, and it will still listen to click events for navigation.
23+
*
24+
* @default "a"
25+
*/
26+
tag?: string
27+
/**
28+
* Configure the active CSS class applied when the link is active. Note the default value can also be configured globally via the `linkActiveClass` router constructor option.
29+
*
30+
* @default "router-link-active"
31+
*/
32+
activeClass?: string
33+
/**
34+
* The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get this class applied as long as the current path starts with `/a/` or is `/a`.
35+
*
36+
* @default false
37+
*/
38+
exact?: boolean
39+
/**
40+
* Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.
41+
*
42+
* @default false
43+
*/
44+
exactPath?: boolean
45+
/**
46+
* Configure the active CSS class applied when the link is active with exact path match. Note the default value can also be configured globally via the `linkExactPathActiveClass` router constructor option.
47+
*
48+
* @default "router-link-exact-path-active"
49+
*/
50+
exactPathActiveClass?: string
51+
52+
/**
53+
* Specify the event(s) that can trigger the link navigation.
54+
*
55+
* @default 'click'
56+
*/
57+
event?: string | ReadonlyArray<string>
58+
/**
59+
* Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the `linkExactActiveClass` router constructor option.
60+
*
61+
* @default "router-link-exact-active"
62+
*/
63+
exactActiveClass?: string
64+
/**
65+
* Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the default of page should be the best fit.
66+
*
67+
* @default "page"
68+
*/
69+
ariaCurrentValue?:
70+
| 'page'
71+
| 'step'
72+
| 'location'
73+
| 'date'
74+
| 'time'
75+
| 'true'
76+
| 'false'
77+
}
78+
79+
interface RouterLinkSlotArgument {
80+
/**
81+
* resolved url. This would be the `href` attribute of an `a` element
82+
*/
83+
href: string
84+
/**
85+
* resolved normalized location
86+
*/
87+
route: Route
88+
/**
89+
* function to trigger the navigation. It will automatically prevent events when necessary, the same way `RouterLink` does
90+
*/
91+
navigate: (e?: MouseEvent) => Promise<undefined | NavigationFailure>
92+
/**
93+
* `true` if the [active class](https://router.vuejs.org/api/#active-class) should be applied. Allows to apply an arbitrary class
94+
*/
95+
isActive: boolean
96+
/**
97+
* `true` if the [exact active class](https://router.vuejs.org/api/#exact-active-class) should be applied. Allows to apply an arbitrary class
98+
*/
99+
isExactActive: boolean
100+
}
101+
102+
/**
103+
* Component to render a link that triggers a navigation on click.
104+
*/
105+
export declare const RouterLink: new (props: RouterLinkProps) => {
106+
$props: typeof props
107+
$scopedSlots: {
108+
default?: ({
109+
href,
110+
route,
111+
navigate,
112+
isActive,
113+
isExactActive
114+
}: RouterLinkSlotArgument) => VNode[] | undefined
115+
}
116+
}

‎types/RouterView.d.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export interface RouterViewProps {
2+
/**
3+
* When a <RouterView> has a name, it will render the component with the corresponding name in the matched route record's components option. See [Named Views](https://router.vuejs.org/guide/essentials/named-views.html) for an example.
4+
*
5+
* @default "default"
6+
*/
7+
name?: string
8+
}
9+
10+
/**
11+
* Component to display the current route the user is at.
12+
*/
13+
export declare const RouterView: new (props: RouterViewProps) => {
14+
$props: typeof props
15+
}

‎types/VueRouter.d.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Component, AsyncComponent, PluginFunction } from 'vue'
2+
import {
3+
ErrorHandler,
4+
RouterOptions,
5+
RouterMode,
6+
Route,
7+
NavigationGuard,
8+
RawLocation,
9+
RouteConfig,
10+
RouteRecordPublic,
11+
NavigationFailure,
12+
NavigationFailureType
13+
} from './Route'
14+
import { RouterLink } from './RouterLink'
15+
import { RouterView } from './RouterView'
16+
17+
export declare class VueRouter {
18+
constructor(options?: RouterOptions)
19+
20+
app: Vue
21+
options: RouterOptions
22+
mode: RouterMode
23+
currentRoute: Route
24+
25+
beforeEach(guard: NavigationGuard): Function
26+
beforeResolve(guard: NavigationGuard): Function
27+
afterEach(hook: (to: Route, from: Route) => any): Function
28+
push(location: RawLocation): Promise<Route>
29+
replace(location: RawLocation): Promise<Route>
30+
push(
31+
location: RawLocation,
32+
onComplete?: Function,
33+
onAbort?: ErrorHandler
34+
): void
35+
replace(
36+
location: RawLocation,
37+
onComplete?: Function,
38+
onAbort?: ErrorHandler
39+
): void
40+
go(n: number): void
41+
back(): void
42+
forward(): void
43+
match(raw: RawLocation, current?: Route, redirectedFrom?: Location): Route
44+
getMatchedComponents(to?: RawLocation | Route): (Component | AsyncComponent)[]
45+
onReady(cb: Function, errorCb?: ErrorHandler): void
46+
onError(cb: ErrorHandler): void
47+
addRoutes(routes: RouteConfig[]): void
48+
49+
addRoute(parent: string, route: RouteConfig): void
50+
addRoute(route: RouteConfig): void
51+
getRoutes(): RouteRecordPublic[]
52+
53+
resolve(
54+
to: RawLocation,
55+
current?: Route,
56+
append?: boolean
57+
): {
58+
location: Location
59+
route: Route
60+
href: string
61+
// backwards compat
62+
normalizedTo: Location
63+
resolved: Route
64+
}
65+
66+
static install: PluginFunction<never>
67+
static version: string
68+
69+
static isNavigationFailure: (
70+
error: any,
71+
type?: number
72+
) => error is NavigationFailure
73+
static NavigationFailureType: {
74+
[k in keyof typeof NavigationFailureType]: NavigationFailureType
75+
}
76+
77+
static START_LOCATION: Route
78+
79+
/**
80+
* Component to render a link that triggers a navigation on click.
81+
*/
82+
static readonly RouterLink: typeof RouterLink
83+
84+
/**
85+
* Component to display the current route the user is at.
86+
*/
87+
static readonly RouterView: typeof RouterView
88+
}

‎types/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './vue'
2-
import { VueRouter } from './router'
2+
import { VueRouter } from './VueRouter'
33

44
export default VueRouter
55

@@ -18,4 +18,4 @@ export {
1818
NavigationGuardNext,
1919
NavigationFailureType,
2020
NavigationFailure
21-
} from './router'
21+
} from './Route'

0 commit comments

Comments
 (0)