1---
2category: '@Router'
3---
4 
5# useRouteQuery
6 
7Shorthand for a reactive `route.query`. Updates the URL query parameters when the ref changes.
8 
9## Usage
10 
11```ts
12import { useRouteQuery } from '@vueuse/router'
13 
14const search = useRouteQuery('search')
15 
16const search = useRouteQuery('search', 'foo') // or with a default value
17 
18const page = useRouteQuery('page', '1', { transform: Number }) // or transforming value
19 
20console.log(search.value) // route.query.search
21search.value = 'foobar' // router.replace({ query: { search: 'foobar' } })
22```
23 
24### Navigation Mode
25 
26By default, changes use `router.replace()`. Set `mode: 'push'` to use `router.push()` instead.
27 
28```ts
29import { useRouteQuery } from '@vueuse/router'
30 
31const search = useRouteQuery('search', '', { mode: 'push' })
32```
33 
34### Bidirectional Transform
35 
36You can provide separate `get` and `set` transforms for reading and writing values.
37 
38```ts
39import { useRouteQuery } from '@vueuse/router'
40 
41const filters = useRouteQuery('filters', [], {
42  transform: {
43    get: v => v ? v.split(',') : [],
44    set: v => v.join(','),
45  },
46})
47 
48// Reading: 'a,b,c' -> ['a', 'b', 'c']
49// Writing: ['a', 'b', 'c'] -> 'a,b,c'
50```
51 
52### Default Value Behavior
53 
54When the value equals the default value, the query parameter is removed from the URL.
55 
56```ts
57import { useRouteQuery } from '@vueuse/router'
58 
59const page = useRouteQuery('page', '1')
60 
61page.value = '2' // URL: ?page=2
62page.value = '1' // URL: (no page param, since it equals default)
63```
64 
65## Type Declarations
66 
67```ts
68export declare function useRouteQuery(
69  name: string,
70): Ref<undefined | null | string | string[]>
71export declare function useRouteQuery<
72  T extends RouteQueryValueRaw = RouteQueryValueRaw,
73  K = T,
74>(
75  name: string,
76  defaultValue?: MaybeRefOrGetter<T>,
77  options?: ReactiveRouteOptionsWithTransform<T, K>,
78): Ref<K>
79```
80