使用浏览器位置

响应式浏览器位置

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

示例

输入和哈希值将更改：

trigger: load

使用方法

import { useBrowserLocation
 } from '@vueuse/core'

const location
 = useBrowserLocation
()

组件用法

vue

<UseBrowserLocation v-slot="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/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
>