useBrowserLocation

分类

浏览器

导出大小

884 B

上次更改

3 个月前

响应式浏览器位置

注意：如果你正在使用 Vue Router，请改用 Vue Router 提供的 useRoute。

演示

源码在线演练 (beta)

输入和哈希值将会改变

trigger: load

用法

import { useBrowserLocation
 } from '@vueuse/core'

const location
 = useBrowserLocation
()

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<UseBrowserLocation v-slot="location">
  Browser Location: {{ location }}
</UseBrowserLocation>

类型声明

显示类型声明

export interface BrowserLocationState {
  readonly trigger
: string
  readonly state
?: any
  readonly length
?: number
  readonly origin
?: string
  hash
?: string
  host
?: string
  hostname
?: string
  href
?: string
  pathname
?: string
  port
?: string
  protocol
?: string
  search
?: string
}
/**
 * Reactive browser location.
 *
 * @see https://vueuse.org.cn/useBrowserLocation
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useBrowserLocation
(options
?: ConfigurableWindow
): Ref
<
  {
    readonly trigger
: string
    readonly state
?: any
    readonly length
?: number | undefined
    readonly origin
?: string | undefined
    hash
?: string | undefined
    host
?: string | undefined
    hostname
?: string | undefined
    href
?: string | undefined
    pathname
?: string | undefined
    port
?: string | undefined
    protocol
?: string | undefined
    search
?: string | undefined
  },
  | BrowserLocationState
  | {
      readonly trigger
: string
      readonly state
?: any
      readonly length
?: number | undefined
      readonly origin
?: string | undefined
      hash
?: string | undefined
      host
?: string | undefined
      hostname
?: string | undefined
      href
?: string | undefined
      pathname
?: string | undefined
      port
?: string | undefined
      protocol
?: string | undefined
      search
?: string | undefined
    }
>
export type UseBrowserLocationReturn
 = ReturnType
<typeof useBrowserLocation
>