useUrlSearchParams

类别

Browser

导出体积

1.48 kB

上次更改

3 months ago

响应式 URLSearchParams

示例

源码 playground (beta)

foo=bar
vueuse=awesome

用法

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`

自定义字符串化函数

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

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`

类型声明

显示类型声明

export type UrlParams
 = Record
<string, string[] | string>
export interface UseUrlSearchParamsOptions
<T
> extends ConfigurableWindow {
  /**
   * @default true
   */
  removeNullishValues
?: boolean
  /**
   * @default false
   */
  removeFalsyValues
?: boolean
  /**
   * @default {}
   */
  initialValue
?: T

  /**
   * 自动写回到 `window.history`
   *
   * @default true
   */
  write
?: boolean
  /**
   * Write mode for `window.history` when `write` is enabled
   * - `replace`: replace the current history entry
   * - `push`: push a new history entry
   * @default 'replace'
   */
  writeMode
?: "replace" | "push"
  /**
   * Custom function to serialize URL parameters
   * When provided, this function will be used instead of the default URLSearchParams.toString()
   * @param params The URLSearchParams object to serialize
   * @returns The serialized query string (should not include the leading '?' or '#')
   */
  stringify
?: (params
: URLSearchParams) => string
}
/**
 * 响应式 URLSearchParams
 *
 * @see https://vueuse.org/useUrlSearchParams
 * @param mode
 * @param options
 */
export declare function useUrlSearchParams
<
  T
 extends Record
<string, any> = UrlParams
,
>(
  mode
?: "history" | "hash" | "hash-params",
  options
?: UseUrlSearchParamsOptions
<T
>,
): T