useUrlSearchParams

リアクティブな URLSearchParams

使用法

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('history')

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

params.foo = 'bar'
params.vueuse = 'awesome'
// URLが `?foo=bar&vueuse=awesome` に更新されます

ハッシュモード

ハッシュモードのルートで使用する場合、mode を hash に指定します

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('hash')

params.foo = 'bar'
params.vueuse = 'awesome'
// URLが `#/your/route?foo=bar&vueuse=awesome` に更新されます

ハッシュパラメータ

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

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('hash-params')

params.foo = 'bar'
params.vueuse = 'awesome'
// URLが `/your/route#foo=bar&vueuse=awesome` に更新されます

カスタム文字列化関数

stringify オプションを使用して、URLパラメータをシリアライズするカスタム関数を提供できます。これは、クエリ文字列に特別なフォーマットが必要な場合に便利です。

import { useUrlSearchParams } from '@vueuse/core'

// 空の値に対して等号を削除するカスタム文字列化関数
const params = useUrlSearchParams('history', {
  stringify: (params) => {
    return params.toString().replace(/=(&|$)/g, '$1')
  }
})

params.foo = ''
params.bar = 'value'
// URLが `?foo&bar=value` に更新され、`?foo=&bar=value` にはなりません