fix(theme): preserve url params when switching languages (#5312)

__tests__/unit/client/theme-default/composables/langs.test.ts

@@ -1,5 +1,5 @@
 import { resolveLocaleLink } from 'client/theme-default/composables/langs'
-import type { VitePressData } from 'vitepress'
+import type { Route, VitePressData } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 import { ref } from 'vue'
 
@@ -24,29 +24,38 @@ function createData(
   } as unknown as VitePressData<DefaultTheme.Config>
 }
 
+function createRoute(query = '', hash = '#install') {
+  return {
+    query,
+    hash
+  } as unknown as Route
+}
+
 describe('client/theme-default/composables/langs', () => {
   test('resolves corresponding links with the default router', () => {
-    expect(resolveLocaleLink(createData({}), 'fr', '/fr/', '/', true)).toBe(
+    expect(
-      '/fr/guide/getting-started.html#install'
+      resolveLocaleLink(createData({}), createRoute(), 'fr', '/fr/', '/', true)
-    )
+    ).toBe('/fr/guide/getting-started.html#install')
   })
 
   test('resolves clean index links with the default router', () => {
     expect(
       resolveLocaleLink(
         createData({}, 'en/guide/index.md', true, '#intro'),
+        createRoute('?query', '#intro'),
         'fr',
         '/fr/',
         '/en/',
         true
       )
-    ).toBe('/fr/guide/#intro')
+    ).toBe('/fr/guide/?query#intro')
   })
 
   test('keeps locale root links when i18n routing is disabled', () => {
     expect(
       resolveLocaleLink(
         createData({ i18nRouting: false }),
+        createRoute(),
         'fr',
         '/fr/',
         '/',
@@ -62,8 +71,8 @@ describe('client/theme-default/composables/langs', () => {
       }
     })
 
-    expect(resolveLocaleLink(data, 'fr', '/fr/', '/', true)).toBe(
+    expect(
-      '/fr/mapped/guide/getting-started.md#install'
+      resolveLocaleLink(data, createRoute(), 'fr', '/fr/', '/', true)
-    )
+    ).toBe('/fr/mapped/guide/getting-started.md#install')
   })
 })

src/client/theme-default/composables/langs.ts

@@ -1,11 +1,13 @@
 import { computed } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import type { VitePressData } from '../../app/data'
+import { useRoute, type Route } from '../../app/router'
 import { ensureStartingSlash } from '../support/utils'
 import { useData } from './data'
 
 export function useLangs({ correspondingLink = false } = {}) {
   const data = useData()
+  const route = useRoute()
   const { site, localeIndex } = data
   const currentLang = computed(() => ({
     label: site.value.locales[localeIndex.value]?.label,
@@ -22,6 +24,7 @@ export function useLangs({ correspondingLink = false } = {}) {
             text: value.label,
             link: resolveLocaleLink(
               data,
+              route,
               key,
               value.link || (key === 'root' ? '/' : `/${key}/`),
               currentLang.value.link,
@@ -38,16 +41,17 @@ export function useLangs({ correspondingLink = false } = {}) {
 
 export function resolveLocaleLink(
   data: VitePressData<DefaultTheme.Config>,
+  route: Route,
   targetLocale: string,
   targetLink: string,
   currentLink: string,
   correspondingLink: boolean
 ) {
-  const { site, page, theme, hash } = data
+  const { site, page, theme } = data
   const i18nRouting = theme.value.i18nRouting
 
   if (correspondingLink && typeof i18nRouting === 'function') {
-    return i18nRouting(data, hash.value, targetLocale)
+    return i18nRouting(data, route.hash, targetLocale)
   }
 
   return (
@@ -56,7 +60,9 @@ export function resolveLocaleLink(
       i18nRouting !== false && correspondingLink,
       page.value.relativePath.slice(currentLink.length - 1),
       !site.value.cleanUrls
-    ) + hash.value
+    ) +
+    route.query +
+    route.hash
   )
 }