Skip to content

Commit b3692e9

Browse files
Mister-HopeMister-Hope
committed
feat: add route option (close #1505)
1 parent 3345dc2 commit b3692e9

35 files changed

Lines changed: 693 additions & 384 deletions

‎e2e/docs/.vuepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default defineUserConfig({
6969
theme: e2eTheme(),
7070

7171
extendsPage: (page) => {
72-
if (page.path === '/page-data/route-meta.html') {
72+
if (page.path === '/page-data/route-meta') {
7373
page.routeMeta = {
7474
a: 1,
7575
b: 2,

‎e2e/docs/router/navigate-by-link.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,35 @@
1414
<a :href="$withBase('/?home=true')" class="home-with-query">Home</a>
1515
<a :href="$withBase('/?home=true#home')" class="home-with-query-and-hash">Home</a>
1616
<a :href="$withBase('/404.html#_404')" class="not-found-with-hash">404</a>
17-
<a :href="$withBase('/404.html#_404?notFound=true')" class="not-found-with-hash-and-query">404</a>
17+
<a :href="$withBase('/404.html#/404?lang=en')" class="not-found-with-complex-hash">404</a>
18+
19+
## HTML Clean Links
20+
21+
<a :href="$withBase('/')" class="home">Home</a>
22+
<a :href="$withBase('/404')" class="not-found">404</a>
23+
<a :href="$withBase('/?home=true')" class="home-with-query">Home</a>
24+
<a :href="$withBase('/?home=true#home')" class="home-with-query-and-hash">Home</a>
25+
<a :href="$withBase('/404#_404')" class="not-found-with-hash">404</a>
26+
<a :href="$withBase('/404#/404?lang=en')" class="not-found-with-complex-hash">404</a>
1827

1928
## Markdown Links with html paths
2029

2130
- [Home](/)
2231
- [404](/404.html)
2332
- [Home with query](/?home=true)
2433
- [Home with query and hash](/?home=true#home)
25-
- [404 with hash](/404.html#404)
34+
- [404 with hash](/404.html#_404)
2635
- [404 with complex hash](/404.html#/404?lang=en)
2736

2837
> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
38+
39+
## Markdown Clean Links
40+
41+
- [Home](/)
42+
- [404](/404)
43+
- [Home with query](/?home=true)
44+
- [Home with query and hash](/?home=true#home)
45+
- [404 with hash](/404#_404)
46+
- [404 with complex hash](/404#/404?lang=en)
47+
48+
> Non-recommended usage. HTML paths could not be prepended with `base` correctly.

‎e2e/docs/router/navigate-by-router.md‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,71 @@
1-
<button id="home" @click="goHome">Home</button>
2-
<button id="not-found" @click="go404">404</button>
1+
<div id="full">
2+
<button class="home" @click="goHome">Home</button>
3+
<button class="not-found" @click="go404">404</button>
4+
<button class="home-with-query" @click="goHomeWithQuery">Home</button>
5+
<button class="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
6+
<button class="not-found-with-hash" @click="go404WithHash">404</button>
7+
<button class="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
8+
</div>
39

4-
<button id="home-with-query" @click="goHomeWithQuery">Home</button>
5-
<button id="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
6-
<button id="not-found-with-hash" @click="go404WithHash">404</button>
7-
<button id="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
10+
<div id="clean">
11+
<button class="home" @click="goHome">Home</button>
12+
<button class="not-found" @click="go404">404</button>
13+
<button class="home-with-query" @click="goHomeWithQuery">Home</button>
14+
<button class="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
15+
<button class="not-found-with-hash" @click="go404WithHash">404</button>
16+
<button class="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
17+
</div>
818

919
<script setup lang="ts">
1020
import { useRouter } from 'vuepress/client';
1121

1222
const router = useRouter();
1323

14-
const goHome = () => {
15-
router.push('/');
24+
const goHome = (event) => {
25+
if (event.currentTarget.parentElement.id === 'full') {
26+
router.push('/index.html');
27+
} else {
28+
router.push('/');
29+
}
1630
}
1731

18-
const go404 = () => {
19-
router.push('/404.html');
32+
const go404 = (event) => {
33+
if (event.currentTarget.parentElement.id === 'full') {
34+
router.push('/404.html');
35+
} else {
36+
router.push('/404');
37+
}
2038
}
2139

22-
const goHomeWithQuery = () => {
23-
router.push('/?home=true');
40+
const goHomeWithQuery = (event) => {
41+
if (event.currentTarget.parentElement.id === 'full') {
42+
router.push('/index.html?home=true');
43+
} else {
44+
router.push('/?home=true');
45+
}
2446
}
2547

26-
const goHomeWithQueryAndHash = () => {
27-
router.push('/?home=true#home');
48+
const goHomeWithQueryAndHash = (event) => {
49+
if (event.currentTarget.parentElement.id === 'full') {
50+
router.push('/index.html?home=true#home');
51+
} else {
52+
router.push('/?home=true#home');
53+
}
2854
}
2955

30-
const go404WithHash = () => {
31-
router.push('/404.html#_404');
56+
const go404WithHash = (event) => {
57+
if (event.currentTarget.parentElement.id === 'full') {
58+
router.push('/404.html#_404');
59+
} else {
60+
router.push('/404#_404');
61+
}
3262
}
3363

34-
const go404WithComplexHash = () => {
35-
router.push('/404.html#/404?lang=en');
64+
const go404WithComplexHash = (event) => {
65+
if (event.currentTarget.parentElement.id === 'full') {
66+
router.push('/404.html#/404?lang=en');
67+
} else {
68+
router.push('/404#/404?lang=en');
69+
}
3670
}
3771
</script>

‎e2e/tests/router/navigate-by-link.spec.ts‎

Lines changed: 126 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,54 @@ test.describe('html links', () => {
7474
})
7575

7676
test('should preserve hash', async ({ page }) => {
77-
await page.locator('#html-links + p > a').nth(4).click()
77+
await page.locator(selector).nth(4).click()
7878
await expect(page).toHaveURL(`${BASE}404.html#_404`)
7979
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
8080
})
8181

82-
test('should preserve hash and query', async ({ page }) => {
82+
test('should preserve complex hash', async ({ page }) => {
8383
await page.locator('#html-links + p > a').nth(5).click()
84-
await expect(page).toHaveURL(`${BASE}404.html#_404?notFound=true`)
84+
await expect(page).toHaveURL(`${BASE}404.html#/404?lang=en`)
85+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
86+
})
87+
})
88+
89+
test.describe('html clean links', () => {
90+
const selector = '#html-clean-links + p > a'
91+
92+
test('should navigate to home correctly', async ({ page }) => {
93+
await page.locator(selector).nth(0).click()
94+
await expect(page).toHaveURL(BASE)
95+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
96+
})
97+
98+
test('should navigate to 404 page correctly', async ({ page }) => {
99+
await page.locator(selector).nth(1).click()
100+
await expect(page).toHaveURL(`${BASE}404.html`)
101+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
102+
})
103+
104+
test('should preserve query', async ({ page }) => {
105+
await page.locator(selector).nth(2).click()
106+
await expect(page).toHaveURL(`${BASE}?home=true`)
107+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
108+
})
109+
110+
test('should preserve query and hash', async ({ page }) => {
111+
await page.locator(selector).nth(3).click()
112+
await expect(page).toHaveURL(`${BASE}?home=true#home`)
113+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
114+
})
115+
116+
test('should preserve hash', async ({ page }) => {
117+
await page.locator(selector).nth(4).click()
118+
await expect(page).toHaveURL(`${BASE}404.html#_404`)
119+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
120+
})
121+
122+
test('should preserve complex hash', async ({ page }) => {
123+
await page.locator('#html-links + p > a').nth(5).click()
124+
await expect(page).toHaveURL(`${BASE}404.html#/404?lang=en`)
85125
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
86126
})
87127
})
@@ -149,7 +189,7 @@ test.describe('markdown links with html paths', () => {
149189
await expect(page).toHaveURL(`${BASE}404.html#_404`)
150190
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
151191
} else {
152-
await expect(locator).toHaveAttribute('href', '/404.html#404')
192+
await expect(locator).toHaveAttribute('href', '/404.html#_404')
153193
await expect(locator).toHaveAttribute('target', '_blank')
154194
}
155195
})
@@ -167,3 +207,85 @@ test.describe('markdown links with html paths', () => {
167207
}
168208
})
169209
})
210+
211+
test.describe('markdown clean links', () => {
212+
const selector = '#markdown-clean-links + ul > li > a'
213+
214+
test('should navigate to home correctly', async ({ page }) => {
215+
const locator = page.locator(selector).nth(0)
216+
217+
if (BASE === '/') {
218+
await locator.click()
219+
await expect(page).toHaveURL('/')
220+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
221+
} else {
222+
await expect(locator).toHaveAttribute('href', '/')
223+
await expect(locator).toHaveAttribute('target', '_blank')
224+
}
225+
})
226+
227+
test('should navigate to 404 page correctly', async ({ page }) => {
228+
const locator = page.locator(selector).nth(1)
229+
230+
if (BASE === '/') {
231+
await locator.click()
232+
await expect(page).toHaveURL(`${BASE}404.html`)
233+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
234+
} else {
235+
await expect(locator).toHaveAttribute('href', '/404')
236+
await expect(locator).toHaveAttribute('target', '_blank')
237+
}
238+
})
239+
240+
test('should preserve query', async ({ page }) => {
241+
const locator = page.locator(selector).nth(2)
242+
243+
if (BASE === '/') {
244+
await locator.click()
245+
await expect(page).toHaveURL(`${BASE}?home=true`)
246+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
247+
} else {
248+
await expect(locator).toHaveAttribute('href', '/?home=true')
249+
await expect(locator).toHaveAttribute('target', '_blank')
250+
}
251+
})
252+
253+
test('should preserve query and hash', async ({ page }) => {
254+
const locator = page.locator(selector).nth(3)
255+
256+
if (BASE === '/') {
257+
await locator.click()
258+
await expect(page).toHaveURL(`${BASE}?home=true#home`)
259+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
260+
} else {
261+
await expect(locator).toHaveAttribute('href', '/?home=true#home')
262+
await expect(locator).toHaveAttribute('target', '_blank')
263+
}
264+
})
265+
266+
test('should preserve hash', async ({ page }) => {
267+
const locator = page.locator(selector).nth(4)
268+
269+
if (BASE === '/') {
270+
await locator.click()
271+
await expect(page).toHaveURL(`${BASE}404.html#_404`)
272+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
273+
} else {
274+
await expect(locator).toHaveAttribute('href', '/404#_404')
275+
await expect(locator).toHaveAttribute('target', '_blank')
276+
}
277+
})
278+
279+
test('should preserve complex hash', async ({ page }) => {
280+
const locator = page.locator(selector).nth(5)
281+
282+
if (BASE === '/') {
283+
await locator.click()
284+
await expect(page).toHaveURL(`${BASE}404.html#/404?lang=en`)
285+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
286+
} else {
287+
await expect(locator).toHaveAttribute('href', '/404#/404?lang=en')
288+
await expect(locator).toHaveAttribute('target', '_blank')
289+
}
290+
})
291+
})

0 commit comments

Comments
 (0)