useBrowserLocation

カテゴリ

ブラウザ

エクスポートサイズ

952 B

最終変更日

先週

リアクティブなブラウザの場所

注: Vue Routerを使用している場合は、代わりにVue Routerによって提供されるuseRouteを使用してください。

デモ

ソースコード

入力とハッシュが変更されます

trigger: 'load'

使用方法

JavaScript

import { useBrowserLocation } from '@vueuse/core'

const location = useBrowserLocation()

コンポーネントの使用

この関数は、@vueuse/componentsパッケージを介して、レンダリングレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

Vue

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

型定義

型定義を表示

TypeScript

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.dokyumento.jp/useBrowserLocation
 */
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>