useUrlSearchParams

类别

Browser

导出大小

1.48 kB

最近修改

2 days ago

响应式 URLSearchParams

🌐 Reactive URLSearchParams

示例

源代码在线运行

• foo=bar
• vueuse=awesome

用法

🌐 Usage

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`

哈希模式

🌐 Hash Mode

在使用哈希模式路由时，指定 mode 到 hash

🌐 When using with hash mode route, specify the mode to hash

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('hash')

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

哈希参数

🌐 Hash Params

在使用历史模式路由时，如果想将 hash 用作参数，请将 mode 指定为 hash-params

🌐 When using with history mode route, but want to use hash as params, specify the mode to hash-params

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`

自定义 Stringify 函数

🌐 Custom Stringify Function

你可以通过 stringify 选项提供自定义函数来序列化 URL 参数。当你需要对查询字符串进行特殊格式化时，这非常有用。

🌐 You can provide a custom function to serialize URL parameters using the stringify option. This is useful when you need special formatting for your query string.

import { useUrlSearchParams } from '@vueuse/core'

// Custom stringify function that removes equal signs for empty values
const params = useUrlSearchParams('history', {
  stringify: (params) => {
    return params.toString().replace(/=(&|$)/g, '$1')
  }
})

params.foo = ''
params.bar = 'value'
// url updated to `?foo&bar=value` instead of `?foo=&bar=value`