How to pass Integer value in Vue router 4 props - vue.js

Question

I'm working with vue router 4, I've got an error when I'm passing post id to post details page via router props, it
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop "destinationId". Expected Number with value 1, got String with value "1"
Now my questions is how can I pass the id as Integer? it's passing as String.
Here is my router file:
routes: [
{
path: '/',
name: 'HomeRoute',
component: HomeView
},
{
path: '/details/:slug/',
name: 'DestinationDetails',
component: () => import('../views/DestinationDetails.vue'),
props: route => ({...route.params , slug: route.params.slug}),
children: [
{
path: ':exprienceSlug',
name: 'experience.show',
component: () => import('../views/PlaceDetails.vue'),
props: route => ({...route.params,}),
},
]
},
{
path: '/:pathMatch(.*)*',
name: "NotFound",
component: () => import('../views/NotFound.vue'),
}
]
And Here is my Post file where form I'm passing the params via router-link tag
<router-link class="col-md-3"
v-for="experience in destination.experiences"
:key="experience.id"
:to="{name: 'experience.show', params: {exprienceSlug: experience.slug, destinationId: destination.id}}">
<PlacesCard :places="experience"/>
</router-link>
And this is post single page where I'm catching the id and fetch the posts.
props: {
destinationId: {
type: Number,
required: true,
default: 0,
},
exprienceSlug: {
type: String,
required: true,
},
},
computed: {
destination(){
return storeData.destinations.find(
destination => destination.id == this.destinationId
)
},
experience(){
return this.destination.experiences.find(
experience => experience.slug == this.exprienceSlug
)
}
},

Answer 1

route.params are of type string | string[].
But you can change that by parsing the params:
children: [
{
path: ':exprienceSlug',
name: 'experience.show',
component: () => import('../views/PlaceDetails.vue'),
props: ({ params }: Route) => ({
...route.params,
destinationId: Number(params.destinationId)
}),
},
]