fix(client): fix RouteLink path resolve (#1512)

Co-authored-by: Xinyu Liu <[email protected]>

Author: Mister-Hope

e2e/docs/components/route-link.md

@@ -47,3 +47,18 @@
 
 - <RouteLink to="/README.md"><span>text</span></RouteLink>
 - <RouteLink to="/README.md"><span>text</span><span>text</span></RouteLink>
+
+### Hash and query
+
+- <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>

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

@@ -84,4 +84,25 @@ it('RouteLink', () => {
         })
     })
   })
+
+  const HASH_AND_QUERY_RESULTS = [
+    `${E2E_BASE}#hash`,
+    `${E2E_BASE}?query`,
+    `${E2E_BASE}?query#hash`,
+    `${E2E_BASE}?query=1#hash`,
+    `${E2E_BASE}?query=1&query=2#hash`,
+    `${E2E_BASE}#hash?query=1&query=2`,
+    `#hash`,
+    `?query`,
+    `?query#hash`,
+    `?query=1#hash`,
+    `?query=1&query=2#hash`,
+    `#hash?query=1&query=2`,
+  ]
+
+  cy.get(`.e2e-theme-content #hash-and-query + ul > li`).each((el, index) => {
+    cy.wrap(el).within(() => {
+      cy.get('a').should('have.attr', 'href', HASH_AND_QUERY_RESULTS[index])
+    })
+  })
 })

packages/client/src/components/RouteLink.ts

@@ -64,7 +64,13 @@ export const RouteLink: FunctionalComponent<
   { slots },
 ) => {
   const router = useRouter()
-  const path = withBase(resolveRoutePath(to))
+  const resolvedPath = resolveRoutePath(to)
+
+  const path =
+    // only anchor or query
+    resolvedPath.startsWith('#') || resolvedPath.startsWith('?')
+      ? resolvedPath
+      : withBase(resolvedPath)
 
   return h(
     'a',

packages/shared/tests/normalizeRoutePath.spec.ts

@@ -42,6 +42,29 @@ const testCases = [
   ['foo/bar.md', 'foo/bar.html'],
   ['foo/bar.html', 'foo/bar.html'],
 
+  // hash and query
+  ['/foo#bar', '/foo.html#bar'],
+  ['/foo.md#bar', '/foo.html#bar'],
+  ['/foo.html#bar', '/foo.html#bar'],
+  ['/foo?bar=baz', '/foo.html?bar=baz'],
+  ['/foo.md?bar=baz', '/foo.html?bar=baz'],
+  ['/foo.html?bar=baz', '/foo.html?bar=baz'],
+  ['/foo?bar=baz#qux', '/foo.html?bar=baz#qux'],
+  ['/foo.md?bar=baz#qux', '/foo.html?bar=baz#qux'],
+  ['/foo.html?bar=baz#qux', '/foo.html?bar=baz#qux'],
+  ['foo#bar', 'foo.html#bar'],
+  ['foo.md#bar', 'foo.html#bar'],
+  ['foo.html#bar', 'foo.html#bar'],
+  ['foo?bar=baz', 'foo.html?bar=baz'],
+  ['foo.md?bar=baz', 'foo.html?bar=baz'],
+  ['foo.html?bar=baz', 'foo.html?bar=baz'],
+  ['foo?bar=baz#qux', 'foo.html?bar=baz#qux'],
+  ['foo.md?bar=baz#qux', 'foo.html?bar=baz#qux'],
+  ['foo.html?bar=baz#qux', 'foo.html?bar=baz#qux'],
+  ['#bar', '#bar'],
+  ['?bar=baz', '?bar=baz'],
+  ['?bar=baz#qux', '?bar=baz#qux'],
+
   // unexpected corner cases
   ['.md', '.html'],
   ['foo/.md', 'foo/.html'],