useRouteParams
Shorthand for a reactive route.params. Available in the @vueuse/router add-on.
Usage
ts
import { useRouteParams } from '@vueuse/router' const userId = useRouteParams('userId') const userId = useRouteParams('userId', '-1') // or with a default value const userId = useRouteParams('page', '1', { transform: Number }) // or transforming value console.log(userId.value) // route.params.userId userId.value = '100' // router.replace({ params: { userId: '100' } })Type Declarations
ts
export declare function useRouteParams( name: string, ): Ref<null | string | string[]> export declare function useRouteParams< T extends RouteParamValueRaw = RouteParamValueRaw, K = T, >( name: string, defaultValue?: MaybeRefOrGetter<T>, options?: ReactiveRouteOptionsWithTransform<T, K>, ): Ref<K>Source
Contributors
Anthony Fu
Anthony Fu
Antério Vieira
IlyaL
alexchexes
Stefan Vojvodic
Guillaume Chau
jack-allocate
Lindsay Gaines
huiliangShen
Manoah Tervoort
Shean de Montigny-Desautels
Eduardo Wesley
Dvir Hazout
Curt Grimes
DevilTeaChangelog
v12.8.0 on v12.3.0 on 59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's nativev12.1.0 on 23fdb - fix(useRouteParams,useRouteQuery): set route param/query to undefined when defaultValue is ref or getter (#3977)v11.3.0 on 44772 - fix(useRouteParams, useRouteQuery): effect triggers twice with object getter as watch source (#4283)965bf - fix(useRouteHash, useRouteParams, useRouteQuery): fix effect triggering multiple times (#4113)v10.10.0 on v10.8.0 on c44fe - fix(useRouteParams,useRouteQuery): set route param/query to undefined when null or defaultValue (#3583)v10.6.0 on v10.3.0 on 0d02f - fix(router): improves router functions: synchronize values, adds tests, and optimize performance (#3184)v10.2.0 on