Vue Router: how to cast params as integers instead of strings? - vue.js

Question

When I enter a URL using the browser field, the params are cast as strings, rather than an integer, e.g. /user/1 returns {id: "1"}. However, when when using this.$route.push({}), the params are, correctly, cast as integers {id: 1}.
Is this behavior intended? If not, how do I fix it?

Answer 1

You have to handle casting any params values yourself. In the route object define a props function. Here is an example:
{
path: '/user/:userId',
component: UserProfile,
props: (route) => {
/**
* This would preserve the other route.params object properties overriding only
* `userId` in case it exists with its integer equivalent, or otherwise with
* undefined.
*/
return { ...route.params, ...{ userId: Number.parseInt(route.params.userId, 10) || undefined }
}
}
link to vue router docs this is under Function mode

Answer 2

I'm probably late to the party, but this is my take on this. I wrote a function that returns a function that casts route params values to the props with same name with the given type.
function paramsToPropsCaster(mapping) {
return function(route) {
let nameType = Object.entries(mapping); // [[param1, Number], [param2, String]]
let nameRouteParam = nameType.map(([name, fn]) => [name, fn(route.params[name])]); // [[param1, 1], [param2, "hello"]]
let props = Object.fromEntries(nameRouteParam); // {param1: 1, param2: "hello"}
return props;
}
}
And then, in your route definition:
{
path: '/projects/:param1/editor/:param2',
component: ProjectEditor,
name: 'project-editor',
props: paramsToPropsCaster({'param1': Number, 'param2': String}),
}
This is just a hint on what you can do to solve the problem asked here, don't use this verbatim!

Answer 3

You can use an array in props to support both types
props: {
type:[Number,String],
required:true
}

Answer 4

Seems like Vue Router doesn't provide a shortcut for this, so I've come up with my own. The castParams function below generates a props function that has the specified type casting built in. I've added casting for integers and booleans but you can easily extend this for whatever other types you want to cast to.
// casts should be an object where the keys are params that might appear in the route, and the values specify how to cast the parameters
const castParams = (casts) => {
return (route) => {
const props = {};
for (var key in route.params) {
const rawValue = route.params[key];
const cast = casts[key];
if (rawValue == null) {
// Don't attempt to cast null or undefined values
props[key] = rawValue;
} else if (cast == null) {
// No cast specified for this parameter
props[key] = rawValue;
} else if (cast == 'integer') {
// Try to cast this parameter as an integer
const castValue = Number.parseInt(rawValue, 10);
props[key] = isNaN(castValue) ? rawValue : castValue;
} else if (cast == 'boolean') {
// Try to cast this parameter as a boolean
if (rawValue === 'true' || rawValue === '1') {
props[key] = true;
} else if (rawValue === 'false' || rawValue === '0') {
props[key] = false;
} else {
props[key] = rawValue;
}
} else if (typeof(cast) == 'function') {
// Use the supplied function to cast this param
props[key] = cast(rawValue);
} else {
console.log("Unexpected route param cast", cast);
props[key] = rawValue;
}
}
return props;
};
};
Then you can use it in your route definitions, eg:
{
path: '/contact/:contactId',
component: 'contact-details-page',
props: castParams({contactId: 'integer'}),
},

Answer 5

I do prefer Rodener Dajes answer, and handle type casting and validation within the component instead of in the route definition:
props: {
id: {
type: [Number, String],
default: 0
},
},
The reason is that it will allow me to define the route much simpler and readable:
{
path: '/job/:id',
name: 'Job',
component: InvoiceJobDetail,
props: true
}

Answer 6

Many of these solutions seem unnecessary complex to me.
Here's what I did in my project - note that route params ending in ID or the param id itself, are automatically converted to Number, so in my case I just had to set props: typedProps(), in nearly all of my routes.
/**
* Casts props into proper data types.
* Props ending in 'ID' and the prop 'id' are cast to Number automatically.
* To cast other props or override the defaults, pass a mapping like this:
* #example
* // Truthy values like 'true', 'yes', 'on' and '1' are converted to Boolean(true)
* {
* path: '/:isNice/:age/:hatSize',
* name: 'foo route',
* props: typedProps({ isNice: Boolean, age: Number, hatSize: Number}),
* },
* #param {Object} mapping
* #returns
*/
const typedProps = (mapping) => {
if (!mapping) {
mapping = {}
}
return (route) => {
let props = {}
for (let [prop, value] of Object.entries(route.params)) {
if (prop in mapping) {
if (mapping[prop] === Boolean) {
value = ['true', '1', 'yes', 'on'].includes(value.toLowerCase())
} else {
value = mapping[prop](value)
}
} else if (prop === 'id' || prop.endsWith('ID')) {
value = Number(value)
}
props[prop] = value
}
return props
}
}
This could use some error handling in case a type coercion fails, but I'll leave that as an exercise for the reader :)

Answer 7

Based on the excellent answer from #pongi: https://stackoverflow.com/a/63897213 I came up with a new package: https://www.npmjs.com/package/vue-router-parse-props. It's written in typescript and has types. Please let me know, what you think.
npm i vue-router-parse-props
// src/router/index.ts
import propsParser from 'vue-router-parse-props'
import { parse } from 'date-fns'
const router = new Router({
base: process.env.BASE_URL,
mode: useHistory ? "history" : "hash",
routes: [
{
path: ':day/:userId',
name: 'UserProfile',
component: () => import('#/components/UserProfile.vue'),
props: paramsToPropsCaster({
userId: Number,
day: (val: string): Date => parse(val, 'yyyy-MM-dd', new Date()),
searchId: {
type: id,
routeKey: "query.q"
}
})
}
]
});