Skip to content

Commit fdefcd8

Browse files
Mister-HopeMister-Hope
committed
feat: add route options
1 parent 9e3789c commit fdefcd8

28 files changed

+567
-302
lines changed

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

+22-2
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,33 @@
1616
<a :href="$withBase('/404.html#404')" class="not-found-with-hash">404</a>
1717
<a :href="$withBase('/404.html#404?notFound=true')" class="not-found-with-hash-and-query">404</a>
1818

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?notFound=true')" class="not-found-with-hash-and-query">404</a>
27+
28+
## Markdown Clean Links
29+
30+
> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
31+
32+
- [Home](/)
33+
- [404](/404)
34+
- [Home with query](/?home=true)
35+
- [Home with query and hash](/?home=true#home)
36+
- [404 with hash](/404#404)
37+
- [404 with hash and query](/404#404?notFound=true)
38+
1939
## Markdown Links with html paths
2040

41+
> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
42+
2143
- [Home](/)
2244
- [404](/404.html)
2345
- [Home with query](/?home=true)
2446
- [Home with query and hash](/?home=true#home)
2547
- [404 with hash](/404.html#404)
2648
- [404 with hash and query](/404.html#404?notFound=true)
27-
28-
> Non-recommended usage. HTML paths could not be prepended with `base` correctly.

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

+52-18
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-hash-and-query" @click="go404WithHashAndQuery">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-hash-and-query" @click="go404WithHashAndQuery">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-hash-and-query" @click="go404WithHashAndQuery">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 go404WithHashAndQuery = () => {
35-
router.push('/404.html#404?notFound=true');
64+
const go404WithHashAndQuery = (event) => {
65+
if (event.currentTarget.parentElement.id === 'full') {
66+
router.push('/404.html#404?notFound=true');
67+
} else {
68+
router.push('/404#404?notFound=true');
69+
}
3670
}
3771
</script>

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

+97-13
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,160 @@ test.beforeEach(async ({ page }) => {
66
})
77

88
test.describe('markdown links', () => {
9+
const selector = '#markdown-links + ul > li > a'
10+
911
test('should navigate to home correctly', async ({ page }) => {
10-
await page.locator('#markdown-links + ul > li > a').nth(0).click()
12+
await page.locator(selector).nth(0).click()
1113
await expect(page).toHaveURL(BASE)
1214
await expect(page.locator('#home-h2')).toHaveText('Home H2')
1315
})
1416

1517
test('should navigate to 404 page correctly', async ({ page }) => {
16-
await page.locator('#markdown-links + ul > li > a').nth(1).click()
18+
await page.locator(selector).nth(1).click()
1719
await expect(page).toHaveURL(`${BASE}404.html`)
1820
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
1921
})
2022

2123
test('should preserve query', async ({ page }) => {
22-
await page.locator('#markdown-links + ul > li > a').nth(2).click()
24+
await page.locator(selector).nth(2).click()
2325
await expect(page).toHaveURL(`${BASE}?home=true`)
2426
await expect(page.locator('#home-h2')).toHaveText('Home H2')
2527
})
2628

2729
test('should preserve query and hash', async ({ page }) => {
28-
await page.locator('#markdown-links + ul > li > a').nth(3).click()
30+
await page.locator(selector).nth(3).click()
2931
await expect(page).toHaveURL(`${BASE}?home=true#home`)
3032
await expect(page.locator('#home-h2')).toHaveText('Home H2')
3133
})
3234

3335
test('should preserve hash', async ({ page }) => {
34-
await page.locator('#markdown-links + ul > li > a').nth(4).click()
36+
await page.locator(selector).nth(4).click()
3537
await expect(page).toHaveURL(`${BASE}404.html#404`)
3638
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
3739
})
3840

3941
test('should preserve hash and query', async ({ page }) => {
40-
await page.locator('#markdown-links + ul > li > a').nth(5).click()
42+
await page.locator(selector).nth(5).click()
4143
await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
4244
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
4345
})
4446
})
4547

4648
test.describe('html links', () => {
49+
const selector = '#html-links + p > a'
50+
51+
test('should navigate to home correctly', async ({ page }) => {
52+
await page.locator(selector).nth(0).click()
53+
await expect(page).toHaveURL(BASE)
54+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
55+
})
56+
57+
test('should navigate to 404 page correctly', async ({ page }) => {
58+
await page.locator(selector).nth(1).click()
59+
await expect(page).toHaveURL(`${BASE}404.html`)
60+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
61+
})
62+
63+
test('should preserve query', async ({ page }) => {
64+
await page.locator(selector).nth(2).click()
65+
await expect(page).toHaveURL(`${BASE}?home=true`)
66+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
67+
})
68+
69+
test('should preserve query and hash', async ({ page }) => {
70+
await page.locator(selector).nth(3).click()
71+
await expect(page).toHaveURL(`${BASE}?home=true#home`)
72+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
73+
})
74+
75+
test('should preserve hash', async ({ page }) => {
76+
await page.locator(selector).nth(4).click()
77+
await expect(page).toHaveURL(`${BASE}404.html#404`)
78+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
79+
})
80+
81+
test('should preserve hash and query', async ({ page }) => {
82+
await page.locator(selector).nth(5).click()
83+
await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
84+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
85+
})
86+
})
87+
88+
test.describe('html clean links', () => {
89+
const selector = '#html-clean-links + p > a'
90+
91+
test('should navigate to home correctly', async ({ page }) => {
92+
await page.locator(selector).nth(0).click()
93+
await expect(page).toHaveURL(BASE)
94+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
95+
})
96+
97+
test('should navigate to 404 page correctly', async ({ page }) => {
98+
await page.locator('#html-clean-links + p> a').nth(1).click()
99+
await expect(page).toHaveURL(`${BASE}404.html`)
100+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
101+
})
102+
103+
test('should preserve query', async ({ page }) => {
104+
await page.locator(selector).nth(2).click()
105+
await expect(page).toHaveURL(`${BASE}?home=true`)
106+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
107+
})
108+
109+
test('should preserve query and hash', async ({ page }) => {
110+
await page.locator(selector).nth(3).click()
111+
await expect(page).toHaveURL(`${BASE}?home=true#home`)
112+
await expect(page.locator('#home-h2')).toHaveText('Home H2')
113+
})
114+
115+
test('should preserve hash', async ({ page }) => {
116+
await page.locator(selector).nth(4).click()
117+
await expect(page).toHaveURL(`${BASE}404.html#404`)
118+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
119+
})
120+
121+
test('should preserve hash and query', async ({ page }) => {
122+
await page.locator(selector).nth(5).click()
123+
await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
124+
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
125+
})
126+
})
127+
128+
test.describe('markdown clean links', () => {
129+
const selector = '#markdown-clean-links + blockquote + ul > li > a'
130+
47131
test('should navigate to home correctly', async ({ page }) => {
48-
await page.locator('#html-links + p > a').nth(0).click()
132+
await page.locator(selector).nth(0).click()
49133
await expect(page).toHaveURL(BASE)
50134
await expect(page.locator('#home-h2')).toHaveText('Home H2')
51135
})
52136

53137
test('should navigate to 404 page correctly', async ({ page }) => {
54-
await page.locator('#html-links + p > a').nth(1).click()
138+
await page.locator(selector).nth(1).click()
55139
await expect(page).toHaveURL(`${BASE}404.html`)
56140
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
57141
})
58142

59143
test('should preserve query', async ({ page }) => {
60-
await page.locator('#html-links + p > a').nth(2).click()
144+
await page.locator(selector).nth(2).click()
61145
await expect(page).toHaveURL(`${BASE}?home=true`)
62146
await expect(page.locator('#home-h2')).toHaveText('Home H2')
63147
})
64148

65149
test('should preserve query and hash', async ({ page }) => {
66-
await page.locator('#html-links + p > a').nth(3).click()
150+
await page.locator(selector).nth(3).click()
67151
await expect(page).toHaveURL(`${BASE}?home=true#home`)
68152
await expect(page.locator('#home-h2')).toHaveText('Home H2')
69153
})
70154

71155
test('should preserve hash', async ({ page }) => {
72-
await page.locator('#html-links + p > a').nth(4).click()
156+
await page.locator(selector).nth(4).click()
73157
await expect(page).toHaveURL(`${BASE}404.html#404`)
74158
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
75159
})
76160

77161
test('should preserve hash and query', async ({ page }) => {
78-
await page.locator('#html-links + p > a').nth(5).click()
162+
await page.locator(selector).nth(5).click()
79163
await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
80164
await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
81165
})
@@ -84,7 +168,7 @@ test.describe('html links', () => {
84168
test.describe('markdown links with html paths', () => {
85169
test('should navigate to home correctly', async ({ page }) => {
86170
const locator = page
87-
.locator('#markdown-links-with-html-paths + ul > li > a')
171+
.locator('#markdown-links-with-html-paths + blockquote + ul > li > a')
88172
.nth(0)
89173
if (BASE === '/') {
90174
await locator.click()

0 commit comments

Comments
 (0)