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(
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?
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?
