feat: add route option (close #1505)

e2e/docs/.vuepress/config.ts

@@ -69,7 +69,7 @@ export default defineUserConfig({
   theme: e2eTheme(),
 
   extendsPage: (page) => {
-    if (page.path === '/page-data/route-meta.html') {
+    if (page.path === '/page-data/route-meta') {
       page.routeMeta = {
         a: 1,
         b: 2,

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

@@ -14,15 +14,35 @@
 <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>
+<a :href="$withBase('/404.html#/404?lang=en')" class="not-found-with-complex-hash">404</a>
+
+## HTML Clean Links
+
+<a :href="$withBase('/')" class="home">Home</a>
+<a :href="$withBase('/404')" 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#_404')" class="not-found-with-hash">404</a>
+<a :href="$withBase('/404#/404?lang=en')" class="not-found-with-complex-hash">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](/404.html#_404)
 - [404 with complex hash](/404.html#/404?lang=en)
 
 > Non-recommended usage. HTML paths could not be prepended with `base` correctly.
+
+## Markdown Clean Links
+
+- [Home](/)
+- [404](/404)
+- [Home with query](/?home=true)
+- [Home with query and hash](/?home=true#home)
+- [404 with hash](/404#_404)
+- [404 with complex hash](/404#/404?lang=en)
+
+> Non-recommended usage. HTML paths could not be prepended with `base` correctly.

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

@@ -1,37 +1,71 @@
-<button id="home" @click="goHome">Home</button>
-<button id="not-found" @click="go404">404</button>
+<div id="full">
+  <button class="home" @click="goHome">Home</button>
+  <button class="not-found" @click="go404">404</button>
+  <button class="home-with-query" @click="goHomeWithQuery">Home</button>
+  <button class="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
+  <button class="not-found-with-hash" @click="go404WithHash">404</button>
+  <button class="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
+</div>
 
-<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>
-<button id="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
+<div id="clean">
+  <button class="home" @click="goHome">Home</button>
+  <button class="not-found" @click="go404">404</button>
+  <button class="home-with-query" @click="goHomeWithQuery">Home</button>
+  <button class="home-with-query-and-hash" @click="goHomeWithQueryAndHash">Home</button>
+  <button class="not-found-with-hash" @click="go404WithHash">404</button>
+  <button class="not-found-with-complex-hash" @click="go404WithComplexHash">404</button>
+</div>
 
 <script setup lang="ts">
 import { useRouter } from 'vuepress/client';
 
 const router = useRouter();
 
-const goHome = () => {
-  router.push('/');
+const goHome = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/index.html');
+  } else {
+    router.push('/');
+  }
 }
 
-const go404 = () => {
-  router.push('/404.html');
+const go404 = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/404.html');
+  } else {
+    router.push('/404');
+  }
 }
 
-const goHomeWithQuery = () => {
-  router.push('/?home=true');
+const goHomeWithQuery = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/index.html?home=true');
+  } else {
+    router.push('/?home=true');
+  }
 }
 
-const goHomeWithQueryAndHash = () => {
-  router.push('/?home=true#home');
+const goHomeWithQueryAndHash = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/index.html?home=true#home');
+  } else {
+    router.push('/?home=true#home');
+  }
 }
 
-const go404WithHash = () => {
-  router.push('/404.html#_404');
+const go404WithHash = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/404.html#_404');
+  } else {
+    router.push('/404#_404');
+  }
 }
 
-const go404WithComplexHash = () => {
-  router.push('/404.html#/404?lang=en');
+const go404WithComplexHash = (event) => {
+  if (event.currentTarget.parentElement.id === 'full') {
+    router.push('/404.html#/404?lang=en');
+  } else {
+    router.push('/404#/404?lang=en');
+  }
 }
 </script>

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

@@ -74,14 +74,54 @@ test.describe('html links', () => {
   })
 
   test('should preserve hash', async ({ page }) => {
-    await page.locator('#html-links + p > a').nth(4).click()
+    await page.locator(selector).nth(4).click()
     await expect(page).toHaveURL(`${BASE}404.html#_404`)
     await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 
-  test('should preserve hash and query', async ({ page }) => {
+  test('should preserve complex hash', 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).toHaveURL(`${BASE}404.html#/404?lang=en`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+})
+
+test.describe('html clean links', () => {
+  const selector = '#html-clean-links + p > a'
+
+  test('should navigate to home correctly', async ({ page }) => {
+    await page.locator(selector).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(selector).nth(1).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(selector).nth(2).click()
+    await expect(page).toHaveURL(`${BASE}?home=true`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('should preserve query and hash', async ({ page }) => {
+    await page.locator(selector).nth(3).click()
+    await expect(page).toHaveURL(`${BASE}?home=true#home`)
+    await expect(page.locator('#home-h2')).toHaveText('Home H2')
+  })
+
+  test('should preserve hash', async ({ page }) => {
+    await page.locator(selector).nth(4).click()
+    await expect(page).toHaveURL(`${BASE}404.html#_404`)
+    await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+  })
+
+  test('should preserve complex hash', async ({ page }) => {
+    await page.locator('#html-links + p > a').nth(5).click()
+    await expect(page).toHaveURL(`${BASE}404.html#/404?lang=en`)
     await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
   })
 })
@@ -149,7 +189,7 @@ test.describe('markdown links with html paths', () => {
       await expect(page).toHaveURL(`${BASE}404.html#_404`)
       await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
     } else {
-      await expect(locator).toHaveAttribute('href', '/404.html#404')
+      await expect(locator).toHaveAttribute('href', '/404.html#_404')
       await expect(locator).toHaveAttribute('target', '_blank')
     }
   })
@@ -167,3 +207,85 @@ test.describe('markdown links with html paths', () => {
     }
   })
 })
+
+test.describe('markdown clean links', () => {
+  const selector = '#markdown-clean-links + ul > li > a'
+
+  test('should navigate to home correctly', async ({ page }) => {
+    const locator = page.locator(selector).nth(0)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL('/')
+      await expect(page.locator('#home-h2')).toHaveText('Home H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+
+  test('should navigate to 404 page correctly', async ({ page }) => {
+    const locator = page.locator(selector).nth(1)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL(`${BASE}404.html`)
+      await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/404')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+
+  test('should preserve query', async ({ page }) => {
+    const locator = page.locator(selector).nth(2)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL(`${BASE}?home=true`)
+      await expect(page.locator('#home-h2')).toHaveText('Home H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/?home=true')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+
+  test('should preserve query and hash', async ({ page }) => {
+    const locator = page.locator(selector).nth(3)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL(`${BASE}?home=true#home`)
+      await expect(page.locator('#home-h2')).toHaveText('Home H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/?home=true#home')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+
+  test('should preserve hash', async ({ page }) => {
+    const locator = page.locator(selector).nth(4)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL(`${BASE}404.html#_404`)
+      await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/404#_404')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+
+  test('should preserve complex hash', async ({ page }) => {
+    const locator = page.locator(selector).nth(5)
+
+    if (BASE === '/') {
+      await locator.click()
+      await expect(page).toHaveURL(`${BASE}404.html#/404?lang=en`)
+      await expect(page.locator('#notfound-h2')).toHaveText('NotFound H2')
+    } else {
+      await expect(locator).toHaveAttribute('href', '/404#/404?lang=en')
+      await expect(locator).toHaveAttribute('target', '_blank')
+    }
+  })
+})