diff --git a/e2e/docs/router/navigate-by-link.md b/e2e/docs/router/navigate-by-link.md
index 397fd82857..e496113275 100644
--- a/e2e/docs/router/navigate-by-link.md
+++ b/e2e/docs/router/navigate-by-link.md
@@ -1,12 +1,7 @@
-## Markdown Links with html
-
-- [Home with query](/?home=true)
-- [Home with query and hash](/?home=true#home)
-- [404 with hash](/404.html#404)
-- [404 with hash and query](/404.html#404?notFound=true)
-
-## Markdown Links with md
+## Markdown Links
 
+- [Home](/README.md)
+- [404](/404.md)
 - [Home with query](/README.md?home=true)
 - [Home with query and hash](/README.md?home=true#home)
 - [404 with hash](/404.md#404)
@@ -14,7 +9,20 @@
 
 ## HTML Links
 
+<a :href="$withBase('/')" class="home">Home</a>
+<a :href="$withBase('/404.html')" class="not-found">404</a>
 <a :href="$withBase('/?home=true')" class="home-with-query">Home</a>
 <a :href="$withBase('/?home=true#home')" class="home-with-query-and-hash">Home</a>
 <a :href="$withBase('/404.html#404')" class="not-found-with-hash">404</a>
 <a :href="$withBase('/404.html#404?notFound=true')" class="not-found-with-hash-and-query">404</a>
+
+## Markdown Links with html paths
+
+- [Home](/)
+- [404](/404.html)
+- [Home with query](/?home=true)
+- [Home with query and hash](/?home=true#home)
+- [404 with hash](/404.html#404)
+- [404 with hash and query](/404.html#404?notFound=true)
+
+> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
diff --git a/e2e/docs/router/navigate-by-router.md b/e2e/docs/router/navigate-by-router.md
index 444c5ae29f..b28397dbf7 100644
--- a/e2e/docs/router/navigate-by-router.md
+++ b/e2e/docs/router/navigate-by-router.md
@@ -1,3 +1,6 @@
+<button id="home" @click="goHome">Home</button>
+<button id="not-found" @click="go404">404</button>
+
 <button id="home-with-query" @click="goHomeWithQuery">Home</button>
 <button id="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
 <button id="not-found-with-hash" @click="go404WithHash">404</button>
@@ -8,6 +11,14 @@ import { useRouter } from 'vuepress/client';
 
 const router = useRouter();
 
+const goHome = () => {
+  router.push('/');
+}
+
+const go404 = () => {
+  router.push('/404.html');
+}
+
 const goHomeWithQuery = () => {
   router.push('/?home=true');
 }
diff --git a/e2e/tests/router/navigate-by-link.spec.ts b/e2e/tests/router/navigate-by-link.spec.ts
index d8b68d0721..4b7560a732 100644
--- a/e2e/tests/router/navigate-by-link.spec.ts
+++ b/e2e/tests/router/navigate-by-link.spec.ts
@@ -5,110 +5,94 @@ test.beforeEach(async ({ page }) => {
   await page.goto('router/navigate-by-link.html')
 })
 
-test.describe('should preserve query', () => {
-  test('markdown links with html suffix', async ({ page }) => {
-    const homeAnchor = page
-      .locator('#markdown-links-with-html + ul > li > a')
-      .nth(0)
-    if (BASE === '/') {
-      await homeAnchor.click()
-      await expect(page).toHaveURL('/?home=true')
-      await expect(page.locator('#home-h2')).toHaveText('Home H2')
-    } else {
-      expect(await homeAnchor.getAttribute('target')).toBe('_blank')
-    }
+test.describe('markdown links', () => {
+  test('should navigate to home correctly', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(0).click()
+    await expect(page).toHaveURL(`${BASE}`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('should navigate to 404 page correctly', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(1).click()
+    await expect(page).toHaveURL(`${BASE}404.html`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 
-  test('markdown links with md suffix', async ({ page }) => {
-    await page.locator('#markdown-links-with-md + ul > li > a').nth(0).click()
+  test('should preserve query', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(2).click()
     await expect(page).toHaveURL(`${BASE}?home=true`)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
 
-  test('html links', async ({ page }) => {
-    await page.locator('#html-links + p > a').nth(0).click()
-    await expect(page).toHaveURL(`${BASE}?home=true`)
+  test('should preserve query and hash', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(3).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
-})
 
-test.describe('should preserve query and hash', () => {
-  test('markdown links with html suffix', async ({ page }) => {
-    const homeAnchor = page
-      .locator('#markdown-links-with-html + ul > li > a')
-      .nth(1)
-    if (BASE === '/') {
-      await homeAnchor.click()
-      await expect(page).toHaveURL('/?home=true#home')
-      await expect(page.locator('#home-h2')).toHaveText('Home H2')
-    } else {
-      expect(await homeAnchor.getAttribute('target')).toBe('_blank')
-    }
+  test('should preserve hash', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(4).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 
-  test('markdown links with md suffix', async ({ page }) => {
-    await page.locator('#markdown-links-with-md + ul > li > a').nth(1).click()
-    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+  test('should preserve hash and query', async ({ page }) => {
+    await page.locator('#markdown-links + ul > li > a').nth(5).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+})
+
+test.describe('html links', () => {
+  test('should navigate to home correctly', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(0).click()
+    await expect(page).toHaveURL(`${BASE}`)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
 
-  test('html links', async ({ page }) => {
+  test('should navigate to 404 page correctly', async ({ page }) => {
     await page.locator('#html-links + p > a').nth(1).click()
-    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page).toHaveURL(`${BASE}404.html`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('should preserve query', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(2).click()
+    await expect(page).toHaveURL(`${BASE}?home=true`)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
-})
 
-test.describe('should preserve hash', () => {
-  test('markdown links with html suffix', async ({ page }) => {
-    const notFound = page
-      .locator('#markdown-links-with-html + ul > li > a')
-      .nth(2)
-    if (BASE === '/') {
-      await notFound.click()
-      await expect(page).toHaveURL('/404.html#404')
-      await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
-    } else {
-      expect(await notFound.getAttribute('target')).toBe('_blank')
-    }
+  test('should preserve query and hash', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(3).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
 
-  test('markdown links with md suffix', async ({ page }) => {
-    await page.locator('#markdown-links-with-md + ul > li > a').nth(2).click()
+  test('should preserve hash', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(4).click()
     await expect(page).toHaveURL(`${BASE}404.html#404`)
     await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 
-  test('html links', async ({ page }) => {
-    await page.locator('#html-links + p > a').nth(2).click()
-    await expect(page).toHaveURL(`${BASE}404.html#404`)
+  test('should preserve hash and query', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(5).click()
+    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
     await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 })
 
-test.describe('should preserve hash and query', () => {
-  test('markdown links with html suffix', async ({ page }) => {
-    const notFound = page
-      .locator('#markdown-links-with-html + ul > li > a')
-      .nth(3)
+test.describe('markdown links with html paths', () => {
+  test('should navigate to home correctly', async ({ page }) => {
+    const locator = page
+      .locator('#markdown-links-with-html-paths + ul > li > a')
+      .nth(0)
     if (BASE === '/') {
-      await notFound.click()
-      await expect(page).toHaveURL('/404.html#404?notFound=true')
-      await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+      await locator.click()
+      await expect(page).toHaveURL('/')
+      await expect(page.locator('#home-h2')).toHaveText('Home H2')
     } else {
-      expect(await notFound.getAttribute('target')).toBe('_blank')
+      await expect(locator).toHaveAttribute('href', '/')
+      await expect(locator).toHaveAttribute('target', '_blank')
     }
   })
-
-  test('markdown links with md suffix', async ({ page }) => {
-    await page.locator('#markdown-links-with-md + ul > li > a').nth(3).click()
-    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
-    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
-  })
-
-  test('html links', async ({ page }) => {
-    await page.locator('#html-links + p > a').nth(3).click()
-    await expect(page).toHaveURL(`${BASE}404.html#404?notFound=true`)
-    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
-  })
 })
diff --git a/e2e/tests/router/navigate-by-router.spec.ts b/e2e/tests/router/navigate-by-router.spec.ts
index 9ae3c7b325..327c53be57 100644
--- a/e2e/tests/router/navigate-by-router.spec.ts
+++ b/e2e/tests/router/navigate-by-router.spec.ts
@@ -5,6 +5,18 @@ test.beforeEach(async ({ page }) => {
   await page.goto('router/navigate-by-router.html')
 })
 
+test('should navigate to home correctly', async ({ page }) => {
+  await page.locator('#home').click()
+  await expect(page).toHaveURL(`${BASE}`)
+  await expect(page.locator('#home-h2')).toHaveText('Home H2')
+})
+
+test('should navigate to 404 page correctly', async ({ page }) => {
+  await page.locator('#not-found').click()
+  await expect(page).toHaveURL(`${BASE}404.html`)
+  await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+})
+
 test('should preserve query', async ({ page }) => {
   await page.locator('#home-with-query').click()
   await expect(page).toHaveURL(`${BASE}?home=true`)