使用浏览器位置

响应式浏览器位置

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

Demo

Category

Browser

Export Size

952 B

Last Changed

2 years ago

source

输入和哈希值将更改：

trigger: 'load'
state: {}
length: 2
origin: 'https://deploy-preview-7--vueuse-cn.netlify.app'
hash: ''
host: 'deploy-preview-7--vueuse-cn.netlify.app'
hostname: 'deploy-preview-7--vueuse-cn.netlify.app'
href: 'https://deploy-preview-7--vueuse-cn.netlify.app/core/useBrowserLocation/'
pathname: '/core/useBrowserLocation/'
port: ''
protocol: 'https:'
search: ''

使用方法

import { useBrowserLocation } from '@vueuse/core'

const location = useBrowserLocation()

组件用法

vue

<UseBrowserLocation v-slot="{ 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.org/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
}>
export type UseBrowserLocationReturn = ReturnType<typeof useBrowserLocation>