Skip to content
On this page

useRouteParams

Category
Package
@vueuse/router
Last Changed
2 weeks ago

Shorthand for reactive route.params available in add-on @vueuse/router

Usage

import { useRouteParams } from '@vueuse/router'

const userId = useRouteParams('userId')

const userId = useRouteParams('userId', '-1') // or with a default value

console.log(userId.value) // route.params.userId
userId.value = '100' // router.replace({ params: { userId: '100' } })
import { useRouteParams } from '@vueuse/router'

const userId = useRouteParams('userId')

const userId = useRouteParams('userId', '-1') // or with a default value

console.log(userId.value) // route.params.userId
userId.value = '100' // router.replace({ params: { userId: '100' } })

Type Declarations

export declare function useRouteParams(
  name: string
): Ref<null | string | string[]>
export declare function useRouteParams<
  T extends null | undefined | string | string[] = null | string | string[]
>(name: string, defaultValue?: T, options?: ReactiveRouteOptions): Ref<T>
export declare function useRouteParams(
  name: string
): Ref<null | string | string[]>
export declare function useRouteParams<
  T extends null | undefined | string | string[] = null | string | string[]
>(name: string, defaultValue?: T, options?: ReactiveRouteOptions): Ref<T>

Source

SourceDocs

Contributors

DevilTea

Changelog

v8.9.0 on 7/6/2022
ece3d - feat: new function (#1173)
useRouteParams has loaded