Skip to content

Commit c12435a

Browse files
Mister-HopeMister-Hope
committed
feat(client): support relative link in RouteLink
1 parent 73be4bb commit c12435a

File tree

3 files changed

+139
-40
lines changed

3 files changed

+139
-40
lines changed

‎e2e/docs/components/route-link.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,37 @@
2828

2929
- <RouteLink to="/README.md" active="">text</RouteLink>
3030
- <RouteLink to="/README.md" active>text</RouteLink>
31+
- <RouteLink to="/" active="">text</RouteLink>
32+
- <RouteLink to="/" active>text</RouteLink>
3133
- <RouteLink to="/README.md" :active="false">text</RouteLink>
3234
- <RouteLink to="/README.md">text</RouteLink>
35+
- <RouteLink to="/" :active="false">text</RouteLink>
36+
- <RouteLink to="/">text</RouteLink>
3337

3438
### Class
3539

3640
- <RouteLink to="/README.md" class="custom-class">text</RouteLink>
3741
- <RouteLink to="/README.md" active class="custom-class">text</RouteLink>
42+
- <RouteLink to="/" class="custom-class">text</RouteLink>
43+
- <RouteLink to="/" active class="custom-class">text</RouteLink>
3844

3945
### Attrs
4046

4147
- <RouteLink to="/README.md" title="Title">text</RouteLink>
4248
- <RouteLink to="/README.md" target="_blank">text</RouteLink>
4349
- <RouteLink to="/README.md" rel="noopener">text</RouteLink>
4450
- <RouteLink to="/README.md" aria-label="test">text</RouteLink>
51+
- <RouteLink to="/" title="Title">text</RouteLink>
52+
- <RouteLink to="/" target="_blank">text</RouteLink>
53+
- <RouteLink to="/" rel="noopener">text</RouteLink>
54+
- <RouteLink to="/" aria-label="test">text</RouteLink>
4555

4656
### Slots
4757

4858
- <RouteLink to="/README.md"><span>text</span></RouteLink>
4959
- <RouteLink to="/README.md"><span>text</span><span>text2</span></RouteLink>
60+
- <RouteLink to="/"><span>text</span></RouteLink>
61+
- <RouteLink to="/"><span>text</span><span>text2</span></RouteLink>
5062

5163
### Hash and query
5264

@@ -56,9 +68,24 @@
5668
- <RouteLink to="/README.md?query=1#hash">text</RouteLink>
5769
- <RouteLink to="/README.md?query=1&query=2#hash">text</RouteLink>
5870
- <RouteLink to="/README.md#hash?query=1&query=2">text</RouteLink>
71+
- <RouteLink to="/#hash">text</RouteLink>
72+
- <RouteLink to="/?query">text</RouteLink>
73+
- <RouteLink to="/?query#hash">text</RouteLink>
74+
- <RouteLink to="/?query=1#hash">text</RouteLink>
75+
- <RouteLink to="/?query=1&query=2#hash">text</RouteLink>
76+
- <RouteLink to="/#hash?query=1&query=2">text</RouteLink>
5977
- <RouteLink to="#hash">text</RouteLink>
6078
- <RouteLink to="?query">text</RouteLink>
6179
- <RouteLink to="?query#hash">text</RouteLink>
6280
- <RouteLink to="?query=1#hash">text</RouteLink>
6381
- <RouteLink to="?query=1&query=2#hash">text</RouteLink>
6482
- <RouteLink to="#hash?query=1&query=2">text</RouteLink>
83+
84+
### Relative
85+
86+
- <RouteLink to="../README.md">text</RouteLink>
87+
- <RouteLink to="../404.md">text</RouteLink>
88+
- <RouteLink to="not-exist.md">text</RouteLink>
89+
- <RouteLink to="../">text</RouteLink>
90+
- <RouteLink to="../404.html">text</RouteLink>
91+
- <RouteLink to="not-exist.html">text</RouteLink>

‎e2e/tests/components/route-link.spec.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ test('should render active status correctly', async ({ page }) => {
3838
const CONFIGS = [
3939
'route-link route-link-active',
4040
'route-link route-link-active',
41+
'route-link route-link-active',
42+
'route-link route-link-active',
43+
'route-link',
44+
'route-link',
4145
'route-link',
4246
'route-link',
4347
]
@@ -53,6 +57,8 @@ test('should render class correctly', async ({ page }) => {
5357
const CONFIGS = [
5458
'route-link custom-class',
5559
'route-link route-link-active custom-class',
60+
'route-link custom-class',
61+
'route-link route-link-active custom-class',
5662
]
5763

5864
for (const [index, className] of CONFIGS.entries()) {
@@ -80,6 +86,22 @@ test('should render attributes correctly', async ({ page }) => {
8086
attrName: 'aria-label',
8187
attrValue: 'test',
8288
},
89+
{
90+
attrName: 'title',
91+
attrValue: 'Title',
92+
},
93+
{
94+
attrName: 'target',
95+
attrValue: '_blank',
96+
},
97+
{
98+
attrName: 'rel',
99+
attrValue: 'noopener',
100+
},
101+
{
102+
attrName: 'aria-label',
103+
attrValue: 'test',
104+
},
83105
]
84106

85107
for (const [index, { attrName, attrValue }] of CONFIGS.entries()) {
@@ -99,6 +121,14 @@ test('should render slots correctly', async ({ page }) => {
99121
spansCount: 2,
100122
spansText: ['text', 'text2'],
101123
},
124+
{
125+
spansCount: 1,
126+
spansText: ['text'],
127+
},
128+
{
129+
spansCount: 2,
130+
spansText: ['text', 'text2'],
131+
},
102132
]
103133
for (const [index, { spansCount, spansText }] of CONFIGS.entries()) {
104134
const children = await page
@@ -114,6 +144,12 @@ test('should render slots correctly', async ({ page }) => {
114144

115145
test('should render hash and query correctly', async ({ page }) => {
116146
const CONFIGS = [
147+
`${BASE}#hash`,
148+
`${BASE}?query`,
149+
`${BASE}?query#hash`,
150+
`${BASE}?query=1#hash`,
151+
`${BASE}?query=1&query=2#hash`,
152+
`${BASE}#hash?query=1&query=2`,
117153
`${BASE}#hash`,
118154
`${BASE}?query`,
119155
`${BASE}?query#hash`,
@@ -134,3 +170,20 @@ test('should render hash and query correctly', async ({ page }) => {
134170
).toHaveAttribute('href', href)
135171
}
136172
})
173+
174+
test('should render relative links correctly', async ({ page }) => {
175+
const CONFIGS = [
176+
BASE,
177+
`${BASE}404.html`,
178+
`${BASE}components/not-exist.html`,
179+
BASE,
180+
`${BASE}404.html`,
181+
`${BASE}components/not-exist.html`,
182+
]
183+
184+
for (const [index, href] of CONFIGS.entries()) {
185+
await expect(
186+
page.locator('.e2e-theme-content #relative + ul > li a').nth(index),
187+
).toHaveAttribute('href', href)
188+
}
189+
})

‎packages/client/src/components/RouteLink.ts‎

Lines changed: 59 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { h } from 'vue'
2-
import type { FunctionalComponent, HTMLAttributes, VNode } from 'vue'
3-
import { useRouter } from 'vue-router'
1+
import { removeLeadingSlash } from '@vuepress/shared'
2+
import { computed, defineComponent, h } from 'vue'
3+
import type { SlotsType, VNode } from 'vue'
4+
import { useRoute, useRouter } from 'vue-router'
45
import { resolveRoutePath } from '../router/index.js'
5-
import { withBase } from '../utils/index.js'
66

77
/**
88
* Forked from https://github.com/vuejs/router/blob/941b2131e80550009e5221d4db9f366b1fea3fd5/packages/router/src/RouterLink.ts#L293
@@ -23,7 +23,7 @@ const guardEvent = (event: MouseEvent): boolean | void => {
2323
return true
2424
}
2525

26-
export interface RouteLinkProps extends HTMLAttributes {
26+
export interface RouteLinkProps {
2727
/**
2828
* Whether the link is active to have an active class
2929
*
@@ -53,42 +53,61 @@ export interface RouteLinkProps extends HTMLAttributes {
5353
*
5454
* It's recommended to use `RouteLink` in VuePress.
5555
*/
56-
export const RouteLink: FunctionalComponent<
57-
RouteLinkProps,
58-
Record<never, never>,
59-
{
60-
default: () => string | VNode | (string | VNode)[]
61-
}
62-
> = (
63-
{ active = false, activeClass = 'route-link-active', to, ...attrs },
64-
{ slots },
65-
) => {
66-
const router = useRouter()
67-
const resolvedPath = resolveRoutePath(to)
56+
export const RouteLink = defineComponent({
57+
name: 'RouteLink',
6858

69-
const path =
70-
// only anchor or query
71-
resolvedPath.startsWith('#') || resolvedPath.startsWith('?')
72-
? resolvedPath
73-
: withBase(resolvedPath)
59+
props: {
60+
/**
61+
* The route path to link to
62+
*/
63+
to: {
64+
type: String,
65+
required: true,
66+
},
7467

75-
return h(
76-
'a',
77-
{
78-
...attrs,
79-
class: ['route-link', { [activeClass]: active }],
80-
href: path,
81-
onClick: (event: MouseEvent = {} as MouseEvent) => {
82-
guardEvent(event) ? router.push(to).catch() : Promise.resolve()
83-
},
68+
/**
69+
* Whether the link is active to have an active class
70+
*
71+
* Notice that the active status is not automatically determined according to the current route.
72+
*/
73+
active: Boolean,
74+
75+
/**
76+
* The class to add when the link is active
77+
*/
78+
activeClass: {
79+
type: String,
80+
default: 'route-link-active',
8481
},
85-
slots.default?.(),
86-
)
87-
}
82+
},
8883

89-
RouteLink.displayName = 'RouteLink'
90-
RouteLink.props = {
91-
active: Boolean,
92-
activeClass: String,
93-
to: String,
94-
}
84+
slots: Object as SlotsType<{
85+
default: () => string | VNode | (string | VNode)[]
86+
}>,
87+
88+
setup(props, { slots }) {
89+
const router = useRouter()
90+
const route = useRoute()
91+
92+
const path = computed(() =>
93+
props.to.startsWith('#') || props.to.startsWith('?')
94+
? props.to
95+
: `${__VUEPRESS_BASE__}${removeLeadingSlash(resolveRoutePath(props.to, route.path))}`,
96+
)
97+
98+
return () =>
99+
h(
100+
'a',
101+
{
102+
class: ['route-link', { [props.activeClass]: props.active }],
103+
href: path.value,
104+
onClick: (event: MouseEvent = {} as MouseEvent) => {
105+
if (guardEvent(event)) {
106+
router.push(props.to).catch()
107+
}
108+
},
109+
},
110+
slots.default?.(),
111+
)
112+
},
113+
})

0 commit comments

Comments
 (0)