feat: add route option (close #1505)

e2e/docs/components/route-link.md

@@ -60,26 +60,23 @@
 - <RouteLink to="/"><span>text</span></RouteLink>
 - <RouteLink to="/"><span>text</span><span>text2</span></RouteLink>
 
-### Hash and query
+### Query and hash
 
 - <RouteLink to="/README.md#hash">text</RouteLink>
 - <RouteLink to="/README.md?query">text</RouteLink>
 - <RouteLink to="/README.md?query#hash">text</RouteLink>
 - <RouteLink to="/README.md?query=1#hash">text</RouteLink>
 - <RouteLink to="/README.md?query=1&query=2#hash">text</RouteLink>
-- <RouteLink to="/README.md#hash?query=1&query=2">text</RouteLink>
 - <RouteLink to="/#hash">text</RouteLink>
 - <RouteLink to="/?query">text</RouteLink>
 - <RouteLink to="/?query#hash">text</RouteLink>
 - <RouteLink to="/?query=1#hash">text</RouteLink>
 - <RouteLink to="/?query=1&query=2#hash">text</RouteLink>
-- <RouteLink to="/#hash?query=1&query=2">text</RouteLink>
 - <RouteLink to="#hash">text</RouteLink>
 - <RouteLink to="?query">text</RouteLink>
 - <RouteLink to="?query#hash">text</RouteLink>
 - <RouteLink to="?query=1#hash">text</RouteLink>
 - <RouteLink to="?query=1&query=2#hash">text</RouteLink>
-- <RouteLink to="#hash?query=1&query=2">text</RouteLink>
 
 ### Relative
 

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

@@ -5,7 +5,6 @@
 - [Home with query](/README.md?home=true)
 - [Home with query and hash](/README.md?home=true#home)
 - [404 with hash](/404.md#404)
-- [404 with hash and query](/404.md#404?notFound=true)
 
 ## HTML Links
 
@@ -14,15 +13,31 @@
 <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>
+
+## 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>
+
+## Markdown Clean Links
+
+> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
+
+- [Home](/)
+- [404](/404)
+- [Home with query](/?home=true)
+- [Home with query and hash](/?home=true#home)
+- [404 with hash](/404#404)
 
 ## Markdown Links with html paths
 
+> Non-recommended usage. HTML paths could not be prepended with `base` correctly.
+
 - [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.

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

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

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

@@ -142,31 +142,28 @@ test('should render slots correctly', async ({ page }) => {
   }
 })
 
-test('should render hash and query correctly', async ({ page }) => {
+test('should render query and hash correctly', async ({ page }) => {
   const CONFIGS = [
     `${BASE}#hash`,
     `${BASE}?query`,
     `${BASE}?query#hash`,
     `${BASE}?query=1#hash`,
     `${BASE}?query=1&query=2#hash`,
-    `${BASE}#hash?query=1&query=2`,
     `${BASE}#hash`,
     `${BASE}?query`,
     `${BASE}?query#hash`,
     `${BASE}?query=1#hash`,
     `${BASE}?query=1&query=2#hash`,
-    `${BASE}#hash?query=1&query=2`,
     `#hash`,
     `?query`,
     `?query#hash`,
     `?query=1#hash`,
     `?query=1&query=2#hash`,
-    `#hash?query=1&query=2`,
   ]
 
   for (const [index, href] of CONFIGS.entries()) {
     await expect(
-      page.locator('.e2e-theme-content #hash-and-query + ul > li a').nth(index),
+      page.locator('.e2e-theme-content #query-and-hash + ul > li a').nth(index),
     ).toHaveAttribute('href', href)
   }
 })