コンテンツにスキップ

useUrlSearchParams

カテゴリ
エクスポートサイズ
1.59 kB
最終更新
先週

リアクティブな URLSearchParams

デモ

  • foo=bar
  • vueuse=awesome

使い方

js
import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('history')

console.log(params.foo) // 'bar'

params.foo = 'bar'
params.vueuse = 'awesome'
// url updated to `?foo=bar&vueuse=awesome`

ハッシュモード

ハッシュモードのルートで使用する場合は、modehash に指定します。

js
import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('hash')

params.foo = 'bar'
params.vueuse = 'awesome'
// url updated to `#/your/route?foo=bar&vueuse=awesome`

ハッシュパラメータ

ヒストリーモードのルートで使用するが、パラメータとしてハッシュを使用したい場合は、modehash-params に指定します。

js
import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('hash-params')

params.foo = 'bar'
params.vueuse = 'awesome'
// url updated to `/your/route#foo=bar&vueuse=awesome`

型定義

typescript
export type UrlParams = Record<string, string[] | string>
export interface UseUrlSearchParamsOptions<T> extends ConfigurableWindow {
  /**
   * @default true
   */
  removeNullishValues?: boolean
  /**
   * @default false
   */
  removeFalsyValues?: boolean
  /**
   * @default {}
   */
  initialValue?: T
  /**
   * Write back to `window.history` automatically
   *
   * @default true
   */
  write?: boolean
}
/**
 * Reactive URLSearchParams
 *
 * @see https://vueuse.dokyumento.jp/useUrlSearchParams
 * @param mode
 * @param options
 */
export declare function useUrlSearchParams<
  T extends Record<string, any> = UrlParams,
>(
  mode?: "history" | "hash" | "hash-params",
  options?: UseUrlSearchParamsOptions<T>,
): T

ソース

ソースデモドキュメント

貢献者

Anthony Fu
lstoeferle
Huodoo
Anthony Fu
sun0day
专业逮虾户aa
Marius
Patrick Stillhart
odex21
Michel EDIGHOFFER
Alex Kozack

変更履歴

v12.0.0-beta.1 2024/11/21
0a9ed - feat!: Vue 2 のサポートを削除、バンドルを最適化し、クリーンアップ (#4349)
v11.3.0 2024/11/21
e77ca - fix: hash モードで location.search が欠落していた (#4340)

MITライセンスの下でリリースされています。