N
Nuxt•3w ago
Tonan

trailingSlash with query string

Hi I’m using the trailingSlash option to add a trailing slash to <NuxtLink />: 
router: {
  options: {
    strict: false,
  },
},

experimental: {
  defaults: {
    nuxtLink: {
      trailingSlash: 'append',
    },
  },
}
router: {
  options: {
    strict: false,
  },
},

experimental: {
  defaults: {
    nuxtLink: {
      trailingSlash: 'append',
    },
  },
}
While most links work fine, I have issues with links that contain a query string: • When clicking a link with the path /radio/?query=brazil, the actual path displayed in the browser becomes /radio?query=brazil • When navigating directly to /radio/?query=brazil, a 302 redirect is executed to /radio?query=brazil Is there a way to keep the trailing slash in URLs that include a query string? Thanks!
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Tonan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, Nuxt provides a global trailingSlash option (e.g., app.trailingSlash: 'append') and a per-link trailingSlash prop for <NuxtLink> to control whether URLs end with a slash or not. This is designed to ensure consistent URL formatting across your application, including for internal navigation and generated links. The configuration you shared is in line with these features, and the intention is that links like /radio/ should retain their trailing slash, even when a query string is present feat(nuxt): trailingSlash config & createRouteResolver util feat(nuxt): add trailingSlash prop to NuxtLink. However, your observation that navigating to /radio/?query=brazil results in a redirect to /radio?query=brazil (removing the slash before the query) suggests that there may be a limitation or bug in the current implementation. The knowledge sources do not provide a documented workaround or configuration to force the trailing slash to be preserved specifically when a query string is present. The PRs and documentation mention the intent to handle trailing slashes, but do not address this edge case with query strings explicitly. Therefore, based on the information available, there is no officially documented way to guarantee that a trailing slash is preserved before the query string in all navigation scenarios. This may require further investigation or a custom solution, and you may want to follow up with the Nuxt team or track related issues/PRs for updates on this behavior. If you need strict control over this behavior, you might consider implementing a custom server middleware to enforce trailing slashes, but this is not covered in the current knowledge sources. Summary:
There is no documented way in the current Nuxt configuration to guarantee that a trailing slash is always preserved before the query string (e.g., /radio/?query=brazil) in all navigation scenarios. The behavior you describe appears to be a limitation or bug, and is not directly addressed in the available documentation or PRs feat(nuxt): trailingSlash config & createRouteResolver util feat(nuxt): add trailingSlash prop to NuxtLink. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@502144033871626240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?