vhook

useHistory

追踪 history 的变化

TIP

代理拦截 pushState 以及 replaceState，实现调用 popState 、 replaceState 以及 pushState 时，可以追踪到 history 的状态变化

API

const {
  state,
  hash,
  search,
  host,
  hostname,
  href,
  origin,
  pathname,
  port,
  protocol,
  clear
} = useHistory()

Result

参数名描述类型
statehistory.stateAny
hashlocation.hashDeepReadonly<Ref<string>>
searchlocation.searchDeepReadonly<Ref<string>>
hostlocation.hostDeepReadonly<Ref<string>>
hostnamelocation.hostnameDeepReadonly<Ref<string>>
originlocation.originDeepReadonly<Ref<string>>
pathnamelocation.pathnameDeepReadonly<Ref<string>>
portLocation.portDeepReadonly<Ref<number>>
protocollocation.protocolDeepReadonly<Ref<number>>
clear清除对 popstate、pushstate和replacestate的监听，不再响应变化() => void

Example

Code

<template>
  <p>hash: {{hash}}</p>
  <p>search: {{search}}</p>
  <p>host: {{host}}</p>
  <p>hostname: {{hostname}}</p>
  <p>origin: {{origin}}</p>
  <p>pathname: {{pathname}}</p>
  <p>port: {{port}}</p>
  <p>protocol: {{protocol}}</p>
</template>

<script>
  import { useHistory } from 'vhook'
  export default {
    setup () {
      return useHistory()
    }
  }
</script>