Skip to content

Commit 06b4c7b

Browse files
xiaoxiangmoexiaoxiangmoe
committed
feat: export RouterLink RouterView
1 parent fb73db2 commit 06b4c7b

File tree

9 files changed

+239
-71
lines changed

9 files changed

+239
-71
lines changed

‎docs-gitbook/ja/api/router-instance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
```
5858

5959
- `current` はデフォルトによる現在のルートです(ほとんどの場合、これを変更する必要はありません)
60-
- `append` は `current` ルートにパスを追加できます([`router-link`](https://router.vuejs.org/en/api/router-link.html#props)と同様に)
60+
- `append` は `current` ルートにパスを追加できます([`router-link`](https://v3.router.vuejs.org/en/api/router-link.html#props)と同様に)
6161

6262
- **router.addRoutes(routes)**
6363

‎docs/guide/essentials/history-mode.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Not to worry: To fix the issue, all you need to do is add a simple catch-all fal
1919

2020
## Example Server Configurations
2121

22-
**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](https://router.vuejs.org/api/#base). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
22+
**Note**: The following examples assume you are serving your app from the root folder. If you deploy to a subfolder, you should use [the `publicPath` option of Vue CLI](https://cli.vuejs.org/config/#publicpath) and the related [`base` property of the router](https://v3.router.vuejs.org/api/#base). You also need to adjust the examples below to use the subfolder instead of the root folder (e.g. replacing `RewriteBase /` with `RewriteBase /name-of-your-subfolder/`).
2323

2424
#### Apache
2525

‎docs/zh/guide/essentials/history-mode.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const router = new VueRouter({
1919

2020
## 后端配置例子
2121

22-
**注意**：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 [Vue CLI 的 `publicPath` 选项](https://cli.vuejs.org/zh/config/#publicpath) 和相关的 [router `base` property](https://router.vuejs.org/zh/api/#base)。你还需要把下列示例中的根目录调整成为子目录 (例如用 `RewriteBase /name-of-your-subfolder/` 替换掉 `RewriteBase /`)。
22+
**注意**：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 [Vue CLI 的 `publicPath` 选项](https://cli.vuejs.org/zh/config/#publicpath) 和相关的 [router `base` property](https://v3.router.vuejs.org/zh/api/#base)。你还需要把下列示例中的根目录调整成为子目录 (例如用 `RewriteBase /name-of-your-subfolder/` 替换掉 `RewriteBase /`)。
2323

2424
#### Apache
2525

‎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: 5 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Vue, { ComponentOptions, PluginFunction, AsyncComponent } from 'vue'
1+
import Vue, { AsyncComponent, ComponentOptions } from 'vue'
22

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

‎types/index.d.ts‎

Lines changed: 4 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,6 @@ export {
1818
NavigationGuardNext,
1919
NavigationFailureType,
2020
NavigationFailure
21-
} from './router'
21+
} from './Route'
22+
export type { RouterLink } from './RouterLink'
23+
export type { RouterView } from './RouterView'

0 commit comments

Comments
 (0)