Without key-value pairs, storing only a single string into the 'meta' field doesn't feel very useful. Making this a user-extensible interface would eliminate that use case (and therefore be a breaking API change) - but I find it highly suspect that anyone is using the meta field in that way in a production app of any meaningful size. This has the following advantages: To link to a named route, you can pass an object to the router-link components to prop: This is the exact same object used programmatically with router.push (): In both cases, the router will navigate to the path /user/erina. If you want to stick just a number or a string in there, it's completely valid. Alongside the path, you can provide a name to any route. Currently, it's possible to pass a non-object for the meta of a route. Now there's admittedly a limitation of this. passing a string containing the middleware's name, instead of the middleware object itself) components/Navigation.vue changes the font size for the route with the name of router-middleware. middleware/class.js uses router middleware to set a class before we enter the route. properties can be accessible from any middleware. Handlers need vite-ssr context, vue-router guard arguments and all middlewares as array. In this example: store/class.js sets a class to the body. One is simple and the other one is needed to be handled.

However if I DON'T define it this way then I lose the ability to statically type check this property and catch developers who accidentally pass an incorrect type (e.g. Using router middleware to set a class to the body so we can then style differently depending on the route. When using the v-slot API, it is required to pass one single child to router-link. This is a more advanced API that primarily targets library authors but can come in handy for developers as well, most of the time in a custom component like a NavLink or other.

If I try to define it this way, I get an error saying that all declarations of 'meta' must have identical modifiers, and that 'meta' was already defined in router.d.ts. v-slot API (3.1.0+) router-link exposes a low level customization through a scoped slot.

Vue router middleware