Typescript suggestions based on router configuration

[rsmple]

What problem is this solving

Working with vue-router on different projects can be difficult because of the complicated route structure. It is not obvious which routes exist in the current configuration and what parameters they require (before you get an error at runtime). Verifying route locations becomes even more difficult when the router's configuration is spread across many files.

This feature should help to create and validate route locations across the project without much effort.

Proposed solution

Actually it is already possible to enable such TypeScript suggestions by declaring all router records with as const satisfies RouteRecordRaw[] and processing the result type. Here I wrote an article on how to implement this in Vue project. But this approach overrides internal interfaces and may noy be reliable enough. I think it is possible to implement this on the vue-router side, and that would work even better.

I would also like to suggest generic syntax for useRoute():

type RouteName // all existing route names

...

const route = useRoute<RouteName.SOME_ROUTE>() // route location, based on router record for route with name RouteName.SOME_ROUTE

This could also be done using the suggested router record processing.

Describe alternatives you've considered

No response

[posva]

This solution was initially implemented but turned out to crash ts with enough routes. Instead, we added #2264 and you can use https://uvr.esm.is/ for typed routes. There is an ongoing refactor of the internal matchers that could simplify some of the types to make them viable but try unplugin-vue-router, you can also add routes at build time to have types without using the file-based routing