How to uri encode properly navigateTo param and how to redirect user
I have pages like below:
pages/[id]/index.vue
pages/[id]/[name].vue
I want to redirect user from /[id] to /[id]/[name]
So for index.vue I created a component with only <script></script> and no <template></template>
Here is how I do it.
index.vue
<script setup lang="ts">
const route = useRoute();
const { data } = await useFetch(
/api/get-name/${route.params.id});
navigateTo(
{
name: 'id-name',
params: {
id: route.params.id,
name: data.value.name,
},
},
{
redirectCode: 301,
},
);
</script>
So this actually works but
Question 1: When I have spaces in the name url looks like /1/some name with a space. Instead of like /1/some%20name So I assumed there is no auto uri encoding for navigateTo params and I manually encoded with encodeURI(data.value.name) then the url has became /1/some%2520name That means % in the param is uri encoded. Why is the space not encoded but % is.
Question 2: Am I doing this script only component only for redirection correct? Is it a good practice?5 Replies
Hi @zigglearner1235. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Let's address your questions one by one, based strictly on the available Nuxt documentation and related sources.
---
Question 1: URI Encoding of
Do not manually encode route params when using
navigateTo Params
You observed that using navigateTo with route params containing spaces results in URLs like /1/some name (with a space), and manually encoding with encodeURI leads to /1/some%2520name (double encoding).
Explanation:
- According to the Nuxt documentation, when you use navigateTo and pass route params, Nuxt (and underlying Vue Router) will handle encoding for you. You should not manually encode the params with encodeURI or encodeURIComponent, as this will result in double encoding (e.g., % becomes %25) [NuxtLink encodes query params].
- If you see /1/some name in the URL, it's likely that the router is decoding the param for display, but the actual navigation and requests will use the correct encoding under the hood.
- Manually encoding params causes % to be encoded again, resulting in %2520 for a space (since %20 becomes %2520).
Best Practice:Do not manually encode route params when using
navigateTo. Pass the raw value, and Nuxt/Vue Router will handle encoding as needed.
---
Question 2: Script-Only Component for Redirection
You are using a component with only a <script setup> block (no template) to perform a redirect.
Is this correct and good practice?
- This is a common and accepted pattern in Nuxt for pages that exist solely to redirect the user elsewhere. The Nuxt documentation and community examples show similar usage, where a page component fetches data and then immediately redirects using navigateTo [navigateTo usage].
- There is no explicit warning in the official docs against this approach. It is efficient for simple redirects, especially when you need to fetch data before determining the redirect target.
---
Summary of Recommendations
- Do not manually encode route params for navigateTo. Pass them as plain strings; Nuxt will encode them as needed.
- Script-only components for redirection are a valid and common pattern in Nuxt.
---
If you encounter issues with spaces not being encoded in the visible URL, but navigation works, this is expected behavior. If you see double encoding (%2520), remove your manual encoding step.
For more details, see the Nuxt navigateTo documentation and the NuxtLink encoding PR.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai if
/1/some name in the url I see is decoded for display automatically but actually /1/some%20name was used under the hood, why doesn't the same happen for the %2520 too?Let me check the knowledge base for you again. One moment! :books:
----------------------
When you see
- If you pass plain strings, Nuxt handles encoding and decoding, and the browser displays a friendly version. - If you manually encode, you get double encoding, and the browser/router cannot "decode" it back to a space, because
/1/some name in the browser's address bar, modern browsers often display decoded characters (like spaces) for readability, but the underlying URL used for navigation and requests is properly encoded as /1/some%20name. Nuxt and Vue Router handle this encoding automatically when you pass route params as plain strings—you should not manually encode them.
However, when you manually encode the param (e.g., using encodeURIComponent), a space becomes %20, and then Nuxt/Vue Router encodes the % character itself, resulting in %2520 (%25 is the encoding for %). This is called double encoding. The router does not "decode for display" in this case because it treats %2520 as literal text, not as an encoded space.
So, the reason you don't see %2520 decoded as a space is because it is not a space—it is the literal string %2520, which is the encoded form of %20. The router and browser only decode once, and double encoding prevents the intended character (a space) from being restored.
In summary:- If you pass plain strings, Nuxt handles encoding and decoding, and the browser displays a friendly version. - If you manually encode, you get double encoding, and the browser/router cannot "decode" it back to a space, because
%2520 is not recognized as a space but as the literal string %20 encoded.
This behavior is confirmed in the Nuxt documentation and related discussions, which state you should not manually encode route params, as Nuxt handles this for you [NuxtLink encodes query params].
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1290550861109657600> Kapa.ai is still learning and improving, please let me know how I did by reacting below.