Hi @shrewd zephyr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Reading encoded query parameter with useRoute
karmic runeBOT
When using Nuxt's useRoute().query, the query parameters are parsed from the actual URL in the browser, not from an HTML-encoded string. In a real browser environment, the URL in the address bar should use & (ampersand) to separate query parameters, not & (the HTML entity for ampersand). If you see paramA and amp;paramB as separate query parameters, it likely means the URL was incorrectly constructed or encoded.
Nuxt (and vue-router) expects URLs to be properly encoded, and the browser will automatically decode standard URL encoding. If you use & in the actual URL (not in HTML), it will be interpreted literally as part of the parameter name, not as a separator.
So, useRoute().query will correctly parse query parameters only if the URL uses & as the separator. If you have & in the URL, it will not be parsed as a separator, and you'll get unexpected results.
There is no built-in way in useRoute to "fix" this, because it's not a Nuxt or vue-router issue—it's about how the URL is constructed and encoded. Make sure to use & in URLs, and let Nuxt handle encoding/decoding as needed. NuxtLink, for example, will automatically encode query parameters for you, so you don't need to use encodeURI or encodeURIComponent manually docs mention NuxtLink encodes query params.
In summary:
- useRoute().query expects properly encoded URLs with & as the separator.
- & is for HTML, not for URLs.
- If you see this issue, check how your URLs are being generated or rendered.