Add useRouteParams and useRouteQuery natively

[maximepvrt]

What problem is this solving

The current approach for accessing route queries and parameters in vue-router is not very developer-friendly. Developers must manually access the route object to retrieve route.query and route.params, which is cumbersome and decreases the developer experience (DX). Having dedicated composables would improve the ergonomics and make the API more intuitive.

Proposed solution

Add composables useRouteQuery and useRouteParams to vue-router, similar to the ones available in vueUse. This would simplify and enhance the DX by allowing developers to access query and params directly in a reactive way, without needing to manually work with the route object.

Reference: @posva comment nuxt/nuxt#24788 (comment)

Describe alternatives you've considered

No response

[posva]

Since that comment some things haven't changed, e.g. an RFC would help to gather feedback 😄 . Others have changed: there are plans to expose some compososables like useRouteQuery() to simplify interacting with the query object and its parsing. However, an even more interesting feature is coming with the new resolver. It will allow to not only have query matching for routes but fully customizable param parsing.
I'm moving this to ideas to gather feedback

[kleinfreund]

What's cumbersome to me isn't accessing route properties through $route/useRoute(), but the exact nature of how query parameters in particular are parsed out of the URL on $route.query.

TL;DR: In my opinion, $route.query[parameter] should always yield a value conforming to Array<string> | undefined to reduce the amount of normalizing one has to do to robustly work with query parameters.

---

Currently, accessing $route.query[parameter] is somewhat convoluted and inconsistent. Its value conforms to Array<string | null> | string | null | undefined (though undefined is missing from the current type definition).

• 1: If the URL doesn't contain the query parameter, $route.query[parameter] returns undefined
• 2: If the URL contains multiple values for the query parameter, $route.query[parameter] conforms to Array<string | null> where null values specifically only appear for ?test while ?test= and ?test=hi produce strings
• 3: If the URL contains one value for the query parameter, $route.query[parameter] conforms to string | null with the same rules for null values and strings applying from point 2. Strangely, $route.query[parameter] will start to behave like point 2 for all parameters as soon as one parameter was directly set to an array (e.g. $route.query[parameter] = ["hi"]).

Given that query parameters can have multiple values (analogous to URLSearchParams.prototype.getAll), it would be nice if $route.query[parameter] would always conform to Array<string> | undefined which could be accomplished with these changes:

• The query object is typed to include undefined values
• ?test returns "" instead of null eliminating the null type (matches URLSearchParams.prototype.get's behavior)
• $route.query[parameter] always yields an array even if there is only one value for the query parameter

All three changes are breaking changes so this is largely just a wishlist of mine that I
wish for after building slightly more complex filter UIs that need to persist multiple values per query parameter in the URL.