query parameters removed when using useLocalePath

[AwesomeAnders]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.16.0
• Nuxt Version: 3.4.2
• Nitro Version: 2.3.3
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, i18n
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/AwesomeAnders/my-app

In above scenario - if you navigate from the index page to the about page, the query paramteres will disappear

Describe the bug

query paramteres will disappear when using useLocalePath

Additional context

This has been mentioned earlier:

#1967

Logs

No response

[BobbieGoede]

That's odd, I expanded on your reproduction to demonstrate which approach does and doesn't work here https://stackblitz.com/edit/github-mbabk8?file=pages/index.vue

It looks like there's some inconsistency with the links generated by localePath, I'll look into it! In the meantime I recommend using name instead of path in the objects passed to localePath (eg. localePath({ name: 'about', query: { query: 'query' } })), as that seems to be working as expected.

[ennioVisco]

That's odd, I expanded on your reproduction to demonstrate which approach does and doesn't work here https://stackblitz.com/edit/github-mbabk8?file=pages/index.vue

It looks like there's some inconsistency with the links generated by localePath, I'll look into it! In the meantime I recommend using name instead of path in the objects passed to localePath (eg. localePath({ name: 'about', query: { query: 'query' } })), as that seems to be working as expected.

@BobbieGoede Could be related to this change in [email protected]: https://nuxt.com/blog/v3-4#:~:text=To%20fix%20a%20bug%20with%20our%20vue%2Drouter%20integration%2C%20we%20now%20generate%20a%20slightly%20different%20path%20matching%20syntax.%20If%20you%20were%20relying%20on%20the%20exact%20path%20generated%2C%20have%20a%20look%20at%20https%3A//github.com/nuxt/nuxt/pull/19902%20for%20more%20information.

[Red-Asuka]

I encountered the same problem. Using :to="localePath({ name: 'try', query: { product: 'ee' } })" can get the correct link, but using :to="localePath('/try?product=ee')" will return a URL without query parameters.

[maxdzin]

@Red-Asuka same problem. :to="localePath('/books?page=2&author=edgar')" returns this URL: /books

[Red-Asuka]

@kazupon Hello, I noticed that the 8.0.0-rc.1 release notes indicate that this issue has been fixed. I tried to upgrade to this version, but the test results show that the above issue still exists.

I encountered the same problem. Using :to="localePath({ name: 'try', query: { product: 'ee' } })" can get the correct link, but using :to="localePath('/try?product=ee')" will return a URL without query parameters.

[adesombergh]

+1 Having the same issue with localePath('/some-route?foo=bar') returns '/en/some-route' and we lose the query params. Tested on version 8.0.0-rc.2

[adesombergh]

Did some investigation, found the potential reason, a possible solution and created new issue in the intlify routing repo

[Red-Asuka]

I have encapsulated the localePath function and temporarily solved this issue.

utils/i18nLocalePath.ts

import type { RawLocation } from '@intlify/vue-router-bridge'
import type { RouteLocation } from '.nuxt/vue-router'

function getUrlQueryStr(originalUrl: string) {
  const { $config: { public: { baseUrl } } } = useNuxtApp()
  const urlObj = new URL(originalUrl, baseUrl)
  const queryStr = urlObj.search + urlObj.hash
  return queryStr
}

export function i18nLocalePath(path: RawLocation | RouteLocation, lang?: Lang) {
  const { $i18n: { locale } } = useNuxtApp()
  const localePath = useLocalePath()
  const loc = lang ?? locale.value
  let queryStr = ''
  if (typeof path === 'string' && (path.includes('?') || path.includes('#')))
    queryStr = getUrlQueryStr(path)
  const url = localePath(path, loc)
  return `${url}${queryStr}`
}

[adesombergh]

Wow thanks, that was fast!

[Red-Asuka]

@kazupon When the path is the /, with only has hash and no query, localePath will be parsed incorrectly, as shown below.

const localePath = useLocalePath()

console.log(localePath('/'))
console.log(localePath('/#hash'))
console.log(localePath('/?test=1#hash'))

// result:
// /en
// /en/
// /en?test=1%23hash

[kazupon]

@Red-Asuka
you would open it as new issue, please 🙏