Skip to content

useRouteQuery

Category
Export Size
506 B
Package
@vueuse/router
Last Changed
5 months ago

Shorthand for a reactive route.query. Available in the @vueuse/router add-on.

Usage

ts
import { 
useRouteQuery
} from '@vueuse/router'
const
search
=
useRouteQuery
('search')
const
search
=
useRouteQuery
('search', 'foo') // or with a default value
const
page
=
useRouteQuery
('page', '1', {
transform
:
Number
}) // or transforming value
console
.
log
(
search
.
value
) // route.query.search
search
.
value
= 'foobar' // router.replace({ query: { search: 'foobar' } })

Type Declarations

ts
export declare function 
useRouteQuery
(
name
: string,
):
Ref
<undefined | null | string | string[]>
export declare function
useRouteQuery
<
T
extends
RouteQueryValueRaw
=
RouteQueryValueRaw
,
K
=
T
,
>(
name
: string,
defaultValue
?:
MaybeRefOrGetter
<
T
>,
options
?:
ReactiveRouteOptionsWithTransform
<
T
,
K
>,
):
Ref
<
K
>

Source

SourceDocs

Contributors

Anthony Fu
Anthony Fu
Antério Vieira
IlyaL
alexchexes
Andrej Agapow
Stefan Vojvodic
Guillaume Chau
jack-allocate
Lindsay Gaines
Manoah Tervoort
Shean de Montigny-Desautels
Eduardo Wesley
wheat
Dvir Hazout
Curt Grimes
Sacha STAFYNIAK
reslear
Marshall Thompson

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
bba3f - feat(router): support partial transform (#4426)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
0cc45 - fix: differentiate undefined and null when writing value (#4382)
v12.1.0 on
23fdb - fix(useRouteParams,useRouteQuery): set route param/query to undefined when defaultValue is ref or getter (#3977)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.3.0 on
65aa0 - feat(router): transform get / set (#4326)
44772 - fix(useRouteParams, useRouteQuery): effect triggers twice with object getter as watch source (#4283)
v11.0.0-beta.3 on
965bf - fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times (#4113)
v10.8.0 on
c44fe - fix(useRouteParams,useRouteQuery): set route param/query to undefined when null or defaultValue (#3583)
v10.6.0 on
771e7 - fix(useRouteQuery,useRouteParams): prevent reset on other scope dispose (#3418)
v10.3.0 on
0d02f - fix(router): improves router functions: synchronize values, adds tests, and optimize performance (#3184)
v10.2.0 on
d5252 - fix(useRouteHash,useRouteQuery,useRouteParams): re-evaluates the value immediately (#3002)
v10.0.0-beta.4 on
d23ca - feat(useRouteQuery,useRouteParams): new transform handler (#2191)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access